如何删除打开的选项卡上的导航栏

Question

我想在新选项卡中打开当前窗口但没有导航栏

我使用 window.open 在新选项卡中打开并使用 document.getElementById 删除导航栏。

https://stackblitz.com/edit/angular-6-routing-pu4kjz

 openNewTab() {

    window.open('' + this.href, '_blank').focus();

    document.getElementById('navigation').outerHTML = '';

  }

<button style="background:red;" 

   (click)="openNewTab()" 

   routerLink="/{{ href }}">

     Open-In-New-Tab >

</button>

实际结果：单击按钮时，导航栏从当前窗口中移除，但在新选项卡上，导航栏仍然存在。

预期结果：单击按钮时 - 我希望当前窗口保持不变（使用导航栏）。新选项卡应该在没有导航栏的情况下打开。

Answer 1

每当您在新选项卡中打开应用程序时，它都会创建一个新的应用程序实例，这意味着两个应用程序分别运行。他们之间没有任何关系。为了控制在两个不同选项卡中运行的应用程序状态，您需要具有可以存储在浏览器本地存储中的公共控制变量。import { Component } from '@angular/core';@Component({&nbsp; selector: 'my-app',&nbsp; templateUrl: './app.component.html',&nbsp; styleUrls: [ './app.component.css' ]})export class AppComponent&nbsp; {&nbsp; name = 'Angular 6 Router with Guard';&nbsp; showNavBar : boolean = true&nbsp; constructor() {&nbsp; &nbsp; if(window.localStorage.getItem('alreadyOpened') === 'true')&nbsp;&nbsp; &nbsp; &nbsp; this.showNavBar = false&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; window.localStorage.setItem('alreadyOpened', 'true');&nbsp; }}第一次打开应用程序时，您将显示导航栏，您应该在应用程序已打开的本地存储中设置状态。在构造函数中，您应该检查应用程序是否已打开。如果打开，则将 showNavbar 设置为 false。这个 showNavbar 变量将使用 NgIf 控制 html 中导航栏的显示。<div class="container"><nav style="background-color: yellow;" id="navigation" class="navbar navbar-default" *ngIf="showNavBar">&nbsp; <div class="container-fluid">&nbsp; &nbsp; <div class="navbar-header">&nbsp; &nbsp; &nbsp; <a class="navbar-brand" href="#"><hello name="{{ name }}"></hello></a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <ul class="nav navbar-nav pull-right">&nbsp; &nbsp; &nbsp; <li routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>&nbsp; &nbsp; &nbsp; <li routerLinkActive="active"><a [routerLink]="['/service']">Service</a></li>&nbsp; &nbsp; &nbsp; <li routerLinkActive="active"><a [routerLink]="['/dashboard']">Dashboard</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; </div></nav>&nbsp; <myComp></myComp>&nbsp; <router-outlet></router-outlet></div>您可能希望在应用程序关闭时清除存储空间。

Answer 2

每当您在新选项卡中打开应用程序时，它都会创建一个新的应用程序实例，这意味着两个应用程序分别运行。他们之间没有任何关系。为了控制在两个不同选项卡中运行的应用程序状态，您需要具有可以存储在浏览器本地存储中的公共控制变量。import { Component } from '@angular/core';@Component({&nbsp; selector: 'my-app',&nbsp; templateUrl: './app.component.html',&nbsp; styleUrls: [ './app.component.css' ]})export class AppComponent&nbsp; {&nbsp; name = 'Angular 6 Router with Guard';&nbsp; showNavBar : boolean = true&nbsp; constructor() {&nbsp; &nbsp; if(window.localStorage.getItem('alreadyOpened') === 'true')&nbsp;&nbsp; &nbsp; &nbsp; this.showNavBar = false&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; window.localStorage.setItem('alreadyOpened', 'true');&nbsp; }}第一次打开应用程序时，您将显示导航栏，您应该在应用程序已打开的本地存储中设置状态。在构造函数中，您应该检查应用程序是否已打开。如果打开，则将 showNavbar 设置为 false。这个 showNavbar 变量将使用 NgIf 控制 html 中导航栏的显示。<div class="container"><nav style="background-color: yellow;" id="navigation" class="navbar navbar-default" *ngIf="showNavBar">&nbsp; <div class="container-fluid">&nbsp; &nbsp; <div class="navbar-header">&nbsp; &nbsp; &nbsp; <a class="navbar-brand" href="#"><hello name="{{ name }}"></hello></a>&nbsp; &nbsp; </div>&nbsp; &nbsp; <ul class="nav navbar-nav pull-right">&nbsp; &nbsp; &nbsp; <li routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>&nbsp; &nbsp; &nbsp; <li routerLinkActive="active"><a [routerLink]="['/service']">Service</a></li>&nbsp; &nbsp; &nbsp; <li routerLinkActive="active"><a [routerLink]="['/dashboard']">Dashboard</a></li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; </div></nav>&nbsp; <myComp></myComp>&nbsp; <router-outlet></router-outlet></div>您可能希望在应用程序关闭时清除存储空间。