Angular中打开无导航栏新标签页的问题求助

Hey there! Let's break down why your current code isn't working and how to fix it.

The Root Problem #

When you use window.open() to create a new tab, that new tab runs in a completely separate browser context. Any DOM changes you make (like document.getElementById('navigation').outerHTML = '') only affect the current tab's page—the new tab's DOM is a fresh instance, so it never gets that removal instruction. Also, your button's routerLink is triggering a navigation in the current tab alongside opening the new one, which is probably not what you want either.

The Solution: Pass a Flag via URL Parameter #

We'll add a query parameter to the URL when opening the new tab, then have the page check for that parameter on load and remove the navbar only if the flag exists. Here's how to implement it step by step:

1. Update the Button and Click Handler

First, prevent the routerLink from navigating in the current tab, and add the noNav flag to the new tab's URL:

<button style="background:red;" (click)="openNewTab($event)" routerLink="/{{ href }}"> Open-In-New-Tab > </button>

openNewTab(event: Event) {
  // Stop the routerLink from changing the current tab's route
  event.preventDefault();
  
  // Add a query parameter to mark this as a no-navbar tab
  const targetUrl = `/${this.href}?noNav=true`;
  window.open(targetUrl, '_blank').focus();
}

2. Check the Parameter on Page Load

In the component that renders your navigation bar (or your root component), add logic to check for the noNav parameter when the page initializes, and remove the navbar if it's present:

import { ActivatedRoute } from '@angular/router';
import { OnInit } from '@angular/core';

export class YourNavbarComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // Subscribe to query parameters to check for the noNav flag
    this.route.queryParams.subscribe(params => {
      if (params['noNav'] === 'true') {
        const navbarElement = document.getElementById('navigation');
        if (navbarElement) {
          navbarElement.outerHTML = '';
        }
      }
    });
  }
}

How This Works #

• When you click the button, we stop the routerLink from navigating the current tab, then open a new tab with ?noNav=true appended to the URL.
• When the new tab loads, the component checks for the noNav parameter. If it exists, it removes the navigation bar from that tab's DOM (leaving your original tab's navbar intact).

Bonus: Clean Up the Parameter (Optional) #

If you don't want the ?noNav=true to stay in the new tab's URL, you can use Angular's router to navigate to the same route without the parameter after removing the navbar:

import { Router } from '@angular/router';

// Add Router to your constructor
constructor(private route: ActivatedRoute, private router: Router) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    if (params['noNav'] === 'true') {
      const navbarElement = document.getElementById('navigation');
      if (navbarElement) {
        navbarElement.outerHTML = '';
      }
      // Navigate to the same route without the query parameter
      this.router.navigate([], {
        queryParams: { noNav: undefined },
        queryParamsHandling: 'merge'
      });
    }
  });
}

内容的提问来源于stack exchange，提问作者Ana_30