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

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({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular 6 Router with Guard';

  showNavBar : boolean = true

  constructor() {

    if(window.localStorage.getItem('alreadyOpened') === 'true') 

      this.showNavBar = false

    else

      window.localStorage.setItem('alreadyOpened', 'true');

  }

}

第一次打开应用程序时，您将显示导航栏，您应该在应用程序已打开的本地存储中设置状态。在构造函数中，您应该检查应用程序是否已打开。如果打开，则将 showNavbar 设置为 false。这个 showNavbar 变量将使用 NgIf 控制 html 中导航栏的显示。

<div class="container">

<nav style="background-color: yellow;" id="navigation" class="navbar navbar-default" *ngIf="showNavBar">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#"><hello name="{{ name }}"></hello></a>

    </div>

    <ul class="nav navbar-nav pull-right">

      <li routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>

      <li routerLinkActive="active"><a [routerLink]="['/service']">Service</a></li>

      <li routerLinkActive="active"><a [routerLink]="['/dashboard']">Dashboard</a></li>

          </ul>

  </div>

</nav>

  <myComp></myComp>

  <router-outlet></router-outlet>

</div>

您可能希望在应用程序关闭时清除存储空间。

Answer 2

每当您在新选项卡中打开应用程序时，它都会创建一个新的应用程序实例，这意味着两个应用程序分别运行。他们之间没有任何关系。为了控制在两个不同选项卡中运行的应用程序状态，您需要具有可以存储在浏览器本地存储中的公共控制变量。

import { Component } from '@angular/core';

@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ]

})

export class AppComponent  {

  name = 'Angular 6 Router with Guard';

  showNavBar : boolean = true

  constructor() {

    if(window.localStorage.getItem('alreadyOpened') === 'true') 

      this.showNavBar = false

    else

      window.localStorage.setItem('alreadyOpened', 'true');

  }

}

第一次打开应用程序时，您将显示导航栏，您应该在应用程序已打开的本地存储中设置状态。在构造函数中，您应该检查应用程序是否已打开。如果打开，则将 showNavbar 设置为 false。这个 showNavbar 变量将使用 NgIf 控制 html 中导航栏的显示。

<div class="container">

<nav style="background-color: yellow;" id="navigation" class="navbar navbar-default" *ngIf="showNavBar">

  <div class="container-fluid">

    <div class="navbar-header">

      <a class="navbar-brand" href="#"><hello name="{{ name }}"></hello></a>

    </div>

    <ul class="nav navbar-nav pull-right">

      <li routerLinkActive="active"><a [routerLink]="['/about']">About</a></li>

      <li routerLinkActive="active"><a [routerLink]="['/service']">Service</a></li>

      <li routerLinkActive="active"><a [routerLink]="['/dashboard']">Dashboard</a></li>

          </ul>

  </div>

</nav>

  <myComp></myComp>

  <router-outlet></router-outlet>

</div>

您可能希望在应用程序关闭时清除存储空间。