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

Question

I want to open the current window in a new tab but without the navigation bar

I have used window.open to open in a new tab and document.getElementById to remove the navigation bar.

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>

Actual result: When the button is clicked, the navigation bar is removed from the current window but on the new tab the navigation bar remains.

Expected result: When the button is clicked - I would like the current window to stay the same (with navbar). The new tab should open without the navbar.

Answer 1

A simple solution would be to pass some query param like:

window.open('' + this.href + '?show=false', '_blank').focus();

then in your component ts disable navigation based on this param

Then your component should be something like:

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';


@Component({
  selector: 'about',
  templateUrl: './about.component.html'
})

export class About{
  title: string = "About Page.";
    public href: String = '';

    constructor(private router: Router, private route:ActivatedRoute)
{ }
  openNewTab() {
    window.open('' + this.href + '?show=false', '_blank').focus();
    document.getElementById('navigation').outerHTML = '';
  }

  ngOnInit() {
    this.href = decodeURI(this.router.url.replace(/\/.*\//g, ''));
    this.route.queryParams.subscribe(params => {
      if (params.show === 'false') {
        document.getElementById('navigation').outerHTML = '';
      }
    });
  }
}

Answer 2

Whenever you open the app in a new tab, it creates a new instance of app, which means that two apps running separately. There is no relation in between them. In order to control the app state running in two different tabs, you need to have common control variables which can be stored in browsers local storage.

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');
  }
}

For the first time when you open the app you will display navbar and you should set a status in the local storage that app was already opened. In the constructor you should check if app is already opened. If opened then set the showNavbar to false. This showNavbar variable will control the display of navbar in the html using NgIf.

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

And you might want to clear the storage when the app is closed.

Answer 3

When you use document.getElementById('navigation') , you are selecting the navigation bar on the current tab, not on the new tab.

When you use window.open , you get a reference to the newly opened window. Then you can execute code when the window is loaded.

openNewTab() {
  const newTab = window.open('' + this.href, '_blank');
  newTab.window.onload = function () {      
      // Add logic for new tab here
  }
}

However, since this is an angular application, app initialization might not be complete when the window is loaded. So, you might not be able to use newTab.document.getElementById('navigation').outerHTML = ''; . An alternative would be to set a class to the body and then add logic in your angular app to not render navigation if body has the class.

openNewTab() {
  const newTab = window.open('' + this.href, '_blank');
  newTab.window.onload = function () {      
    newTab.document.body.classList.add('removeHeader');
  }
}

You can now modify your app.component to not render the navigation bar if body has the class removeHeader . Add a flag to your app.component to check for this condition.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  name = 'Angular 6 Router with Guard';
  displayNavigation = true;

  ngOnInit() {
    this.displayNavigation = !document.body.classList.contains('removeHeader');
  }
}

Now, use displayNavigation as *ngIf on your nav in app.component

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