Ouvrir une nouvelle fenêtre dans un nouvel onglet

Je suis en train d'ouvrir une nouvelle fenêtre lorsque l'utilisateur cliquera 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 c'est jeter une erreur:

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

Comment le corriger pour qu'il fonctionne?

  • window.open('some url'); va fonctionner, mais si vous souhaitez utiliser angulaire universelle vous auriez éviter de manipuler la fenêtre directement.
  • donc, il sera possible ou pas
  • J'ai cette exigence, donc si vous avez une solution s'il vous plaît suggérer
  • Je n'ai pas l'habitude angulaire universelle, mais j'ai vu que vous pouvez accéder à une variable isBrowser (de ce que je me souviens). Utilisez donc DI injecter cette variable dans votre application de sorte que vous pouvez l'utiliser à partir de n'importe où. Alors, quand vous avez à utiliser window.open juste envelopper comme cela : if (isBrowser) { window.open('some url) }
  • Je suis aux prises avec popup exigence en matière d'ouverture dans angular2 application avec mvc pouvez-vous svp fournir l'exemple de code comment êtes-vous d'ouvrir le navigateur de la fenêtre popup dans votre application.
InformationsquelleAutor Rhushikesh | 2016-11-23
  1. 50

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

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

    De sorte que tous vous avez à faire est de simplement changer le nom de la variable dans laquelle vous capture de l'onglet de référence de l'

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

    Cependant, ce n'est pas l'approche recommandée comme angular2 les applications peuvent s'exécuter dans une variété d'environnements, tels que le mobile ou être rendu côté serveur où window objet peut ou peut ne pas être disponible. Sans oublier qu'il serait très difficile de se moquer de la fenêtre d'objet dans les tests

    Au lieu de cela, vous pouvez enrouler le window objet dans un service et injecter de ce service dans votre composant. De cette façon, vous pouvez simplement remplacer le service mise en œuvre, selon l'environnement, en utilisant l'injection de Dépendance

    Le service de fichier

    @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);
    })
}
    • ne fonctionne pas pour moi, j'ai besoin de l'appeler au fournisseur dans le fichier du module?
    • oui. vous devez appeler dans le fournisseur dans le fichier du module
    InformationsquelleAutor Kiran Yallabandi