Comment ouvrir une nouvelle fenêtre dans un nouvel onglet en angular2

Question

J'essaie d'ouvrir une nouvelle fenêtre lorsque l'utilisateur clique sur le bouton comme suit

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

mais il jette une erreur,

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

S'il vous plaît, corrigez-moi pour que ça marche.

Answer 1

La raison pour laquelle window la variable étant undefined est le fait que vous avez déclaré une variable nommée window à nouveau dans la portée locale .

Selon les règles de scoping de javascript/typescript Avant d'accéder à la variable globale, la valeur de la variable locale est recherchée. De même, lorsque vous déclarez initialement une variable, celle-ci est définie comme indéfinie, d'où le message d'erreur que vous recevez.

Il suffit donc de modifier le nom de la variable dans laquelle vous capturez la référence de l'onglet ouvert.

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

Ce n'est toutefois pas l'approche recommandée, car les applications angular2 peuvent fonctionner dans divers environnements, tels que les mobiles, ou être rendues côté serveur où window L'objet peut être disponible ou non. Sans compter qu'il serait très difficile de simuler l'objet fenêtre dans les tests.

Au lieu de cela, vous pouvez envelopper le window dans un service et injecter ce service dans votre composant. De cette façon, vous pouvez simplement substituer l'objet service en fonction de l'environnement, en utilisant Injection de dépendances

Le fichier de service

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

    getNativeWindow() {
        return window;
    }
}

Le fichier du composant

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