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

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

一个简单的解决方案是传递一些查询参数，例如:

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

然后在你的组件中禁用基于这个参数的导航

那么你的组件应该是这样的:

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