web-dev-qa-db-fra.com

Ouvrir une nouvelle fenêtre dans un nouvel onglet

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 ça jette une erreur:

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

Comment le corriger pour le faire fonctionner?

angulartypescripttabswindow
31
Rhushikesh

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

Selon les règles de cadrage de javascript/TypeScript, avant que la variable globale ne soit utilisée, la valeur des variables locales est recherchée. De plus, lorsque vous déclarez une variable pour la première fois, elle est définie sur non défini, d'où le message d'erreur que vous recevez.

Donc, 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');

Toutefois, cette approche n'est pas recommandée car les applications angular2 peuvent s'exécuter dans divers environnements, tels que les environnements mobiles ou restituées côté serveur, où l'objet window peut être disponible ou non. Sans parler du fait qu'il serait très difficile de se moquer de l'objet window dans les tests

Au lieu de cela, vous pouvez envelopper l'objet window dans un service et injecter ce service dans votre composant. De cette façon, vous pouvez simplement substituer la mise en œuvre du service en fonction de l'environnement, en utilisant l'injection de dépendance

Le fichier de service

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

    getNativeWindow() {
        return window;
    }
}

Le fichier de 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);
    })
}
51
Kiran Yallabandi