Cómo abrir una nueva ventana en una pestaña nueva en angular2

Question

Cómo abrir una nueva ventana en una pestaña nueva en angular2

Estoy tratando de abrir una nueva ventana cuando el usuario haga clic en el botón como sigue

protected assignActity(type: string): void {
    var window = window.open('/#/link');
    this.Service.assignActivity(type).subscribe(res => {
      window.location = '/#/link/' + res;
      console.log(res);
    })
  }

Pero lanzando un error,

core.umd.js:3468 TypeError: Cannot read property 'open' of undefined

Por favor corríjame para que funcione.

25

window typescript angular tabs

Author: MrBoJangles, 2016-11-23

Source

1 answers

score 46 · Accepted Answer

La razón por la que window variable es undefined es el hecho de que ha declarado una variable llamada window de nuevo en el ámbito local.

De acuerdo con las reglas de alcance de javascript/typescript, antes de acceder a la variable global, se busca el valor de las variables locales. Además, cuando declara inicialmente una variable, se establece en undefined, de ahí el mensaje de error que recibe.

Así que todo lo que tiene que hacer es simplemente cambiar el nombre de la variable en la que captura la pestaña abierta referencia

var newWindow = window.open('some_url');

Sin embargo, este no es el enfoque recomendado, ya que las aplicaciones angular2 pueden ejecutarse en una variedad de entornos, como móviles o renderizarse en el lado del servidor donde el objeto window puede o no estar disponible. Sin mencionar que sería muy difícil burlarse del objeto window en tests

En su lugar, puede envolver el objeto window en un servicio e inyectar ese servicio en su componente. De esta manera, simplemente puede sustituir la implementación service de acuerdo con el entorno, usando Inyección de dependencia

El archivo de servicio

@Injectable()
export class WindowRef {
    constructor() {}

    getNativeWindow() {
        return window;
    }
}

El archivo componente

@Component({
  selector : 'demo',
  template : '<div> Demo </div>'
})
class DemoComponent {

   nativeWindow: any
   constructor( private winRef: WindowRef ) { 
       this.nativeWindow = winRef.getNativeWindow();
   }

    protected assignActity(type: string): void {
       var newWindow = this.nativeWindow.open('/#/link');
       this.Service.assignActivity(type).subscribe(res => {

       newWindow.location = '/#/link/' + res;
       console.log(res);
    })
}