Incapable de rattraper les événements de EventEmitter dans Angular2?

J'ai écrit une base angulaire de l'application qui utilise la EventEmitter classe, cependant je n'arrive pas à l'écoute de composants pour attraper l'événement.

Voici mon code (à l'aide de l'alpha.27 sur Angular2 /Tapuscrit de 1,5 compilation pour ES5)
Des excuses pour le verbose exemple.

Tous les conseils sur ce que je suis en tort de faire ce que serait grandement apprécié.

import {Component, View, EventEmitter} from 'angular2/angular2';

@Component({
    selector: 'login',
    events : ['loggedIn']
})

@View({
    template: '<button type="button" (click)="submitForm()">Click Me</button>'
})

export class Login {

    loggedIn = new EventEmitter();

    constructor() { 
    }

    submitForm() {
        console.log("event fired");
        this.loggedIn.next({});
    }

}


@Component({
    selector: 'app'
})

@View({
    template: "<div>This is the application</div>"
})

export class App {
    constructor() {

    }
}

@Component({
  selector: 'root'
})

@View({
  template: '<app [hidden]=!showApp></app><login (loggedIn)="loggedIn()" [hidden]=showApp></login>',
  directives: [ App, Login ]
})

export class Root {

    showApp:boolean;

    constructor() { 
        this.showApp = false; 
    }

    loggedIn() { 
        console.log("event caught");
        this.showApp = true; 
    }

}

essayez (^loggedIn)
Merci pour votre réponse. J'ai essayé: (^loggedIn)="loggedIn ()", mais cela n'a pas résolu le problème.
pourrait-on supprimer cette question? c'est assez déroutant, parce que ng2 a été mis à jour et maintenant ni question ni réponse n'est pas à jour

OriginalL'auteur DaylightProgrammer | 2015-06-24

Ici est un travail Plunker de votre application.

import {Component, View, EventEmitter, bootstrap} from '@angular/core';

@Component({
   selector: 'login',
  events : ['update']
})
@View({
  template: '<button type="button" (click)="submitForm()">Login</button>'
})
class Login {
  constructor() { 
    this.update = new EventEmitter();
  }
  submitForm() {
    this.update.next();
  }
}


@Component({
  selector: 'app'
})
@View({
  template: "<div>This is the application</div>"
})
class App {}

@Component({
 selector: 'root'
})
@View({
  template: `
  <app [hidden]="!showApp"></app>
  <login (update)="loggedIn()" 
    [hidden]="showApp"></login>
  `,
  directives: [App, Login]
})
class Root {
    showApp:boolean;
    constructor() { 
        this.showApp = false; 
    }
    loggedIn() { 
        this.showApp = true; 
    }
}

bootstrap(Root);

Je pense qu'il y a eu quelques problèmes. (update) dans le modèle est un type d'événement, de sorte qu'il ne peut pas être appelé loggedIn. Je l'ai trouvé plus facile que d'appeler l'événement update tout à fait.

Merci! Appréciez le travail par exemple.

OriginalL'auteur shmck

4

Juste eu du mal avec cette question de moi-même.

La raison pour laquelle il n'a pas de travail est due au cas de le nom de l'événement. Si cela a été nommée loggedin plutôt que loggedIn il aurait été bien.

J'ai juste constaté que, Si vous souhaitez utiliser des majuscules et des minuscules des noms pour vos événements personnalisés, vous pouvez utiliser 'loggedIn" pour les noms de variable, et "connecté" pour le nom de l'événement dans le code HTML. c'est comme ça ... (connecté)="fonction()"

OriginalL'auteur Simon
3

Dans le modèle de la classe Racine, vous devez passer $événement dans le loggedIn appel:
```
(loggedIn) = "loggedIn($event)"
```
L' $event variable représente l'objet que vous passez à la méthode suivante de votre loggedIn émetteur dans la classe de Connexion. Bien sûr, votre loggedIn méthode de la Racine de votre classe doit également accepter un objet comme argument.

Aussi, dans le code-behind de la Racine, vous devez déclarer: loggedIn(obj) { console.log("l'événement pris"); ce.showApp = true; }
En fait, cela n'a aucun effet. Le problème est lié à la (event) sur le côté gauche étant appelé (loggedIn), lorsque le type d'événement est (update).

OriginalL'auteur Krustie101
1

Dans mon cas, j'ai oublié de décorer le membre de la classe avec @Output(), par exemple
```
@Output() close: EventEmitter<DialogResult> = new EventEmitter<DialogResult>();
```
OriginalL'auteur Thorsten Westheider
0

Avez-vous vu ce exemple? Viktor Savkin utilise presque tout la même chose que vous, mais sans un objet vide dans cette ligne:
```
this.complete.next();
```
Sur le AngularU, Misko a montré un exemple avec EventEmitter: https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update
départ à 41:00

Si je passe par aucun des arguments que j'obtient l'erreur de compilation: erreur TS2346: paramètres Fournis ne correspondent pas à la signature de l'appel de la cible.
Cela n'a pas d'effet, vous pouvez passer d'un objet ou d'appeler tout simplement la Manifestation de l'Émetteur.

OriginalL'auteur kakaja

Vous devez vous connecter pour publier un commentaire.