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

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 lance une erreur,

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

s'il vous plaît corrigez-moi à le faire fonctionner.

25
demandé sur MrBoJangles 2016-11-23 12:09:10
la source

1 ответов

la raison de window variable étant undefined c'est le fait que vous avez déclaré une variable nommée window à nouveau dans le scope local.

Selon les règles de portée de javascript/typescript, avant d'accéder à la variable globale, la valeur des variables locales est recherchée. Aussi lorsque vous déclarez une variable, il est indéfinie, d'Où le message d'erreur que vous recevez.

alors tout ce que vous avez à faire est simplement de changer le nom de la variable dans laquelle vous capturez la référence de l'onglet ouvert

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

cependant ce n'est pas l'approche recommandée car les applications angular2 peuvent fonctionner dans une variété d'environnements tels que mobile OU être rendus côté serveur où window l'objet peut être disponible ou non. Sans compter qu'il serait très difficile de se moquer de l'objet window dans les tests

au lieu de cela, vous pouvez envelopper le window objet dans un service et injecter de ce service dans votre composant. De cette façon, vous pouvez simplement remplacer le service implémentation selon l'environnement, en utilisant injection de dépendance

le fichier de service

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

    getNativeWindow() {
        return window;
    }
}

le fichier de composants

@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);
    })
}
46
répondu Kiran Yallabandi 2017-09-27 21:18:05
la source

Autres questions sur