Búsqueda de sitios web

javascript - Cómo quitar la barra de navegación en la pestaña abierta

Quiero abrir la ventana actual en una nueva pestaña pero sin la barra de navegación

He usado window.open para abrir en una nueva pestaña y document.getElementById para eliminar la barra de navegación.

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>

Resultado actual: Cuando se hace clic en el botón, la barra de navegación se elimina de la ventana actual, pero en la nueva pestaña la barra de navegación permanece.

Resultado esperado: Cuando se haga clic en el botón, me gustaría que la ventana actual permanezca igual (con la barra de navegación). La nueva pestaña debería abrirse sin la barra de navegación.

Respuesta #1

Una solución simple sería pasar algún parámetro de consulta como:

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

entonces en tu componente ts desactiva la navegación basada en este parámetro

Entonces tu componente debería ser algo como:

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

Respuesta #2

Cada vez que abres la aplicación en una nueva pestaña, se crea una nueva instancia de la aplicación, lo que significa que dos aplicaciones están ejecutándose por separado. No hay relación entre ellas. Para controlar el estado de la aplicación que se ejecuta en dos pestañas diferentes, necesitas tener variables de control comunes que pueden almacenarse en el almacenamiento local del navegador.

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

Por primera vez, cuando abras la aplicación, se mostrará la barra de navegación y deberías establecer un estado en el almacenamiento local indicando que la aplicación ya fue abierta. En el constructor, deberías verificar si la aplicación ya fue abierta. Si ya fue abierta, entonces establece showNavbar en false. Esta variable showNavbar controlará la visualización de la barra de navegación en el html usando 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>

Y es posible que quieras borrar el almacenamiento cuando la aplicación se cierre.

Artículos relacionados