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

router events angular 6

Question

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 arrojando un error,

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

por favor corrígeme para que funcione.

Answer 1

La razón por la cual la variable de window undefined está undefined es el hecho de que ha declarado una variable llamada window nuevamente 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 indefinido, 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 referencia de la pestaña abierta

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 el móvil o en el lado del servidor, donde el objeto de la window puede o no estar disponible. Sin mencionar que sería muy difícil burlarse del objeto de la ventana en las pruebas.

En su lugar, puede envolver el objeto de window en un servicio e inyectar ese servicio en su componente. De esta manera, puede simplemente sustituir la implementación del servicio de acuerdo con el entorno, utilizando la 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);
    })
}