Nie można przechwytywać zdarzeń z EventEmitter w Angular2?

Question

Napisałem podstawową aplikację kątową, która wykorzystuje klasę EventEmitter, jednak nie mogę pobrać komponentu słuchającego, aby złapać zdarzenie.

Oto mój kod (przy użyciu alfa.27 na Angular2/TypeScript 1.5 kompilujący się do ES5) Przeprasza za szczegółowy przykład.

Wszelkie porady na temat tego, co robię niewłaściwie, co byłoby bardzo cenne.

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

} 

Answer 1

Oto a working Plunker Twojej aplikacji.

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

Myślę, że było kilka problemów. (update) w szablonie jest typem zdarzenia, więc nie można go nazwać loggedIn. Zauważyłem, że łatwiej jest nazwać to wydarzenie update.

Answer 2

Czy widziałeś to example? Wiktor Savkin korzysta prawie wszystko tak samo jak ty, ale bez pustego obiektu w tej linii:

this.complete.next(); 

Na AngularU, Misko wykazał przykład z EventEmitter: https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update zaczynając od 41:00

Answer 3

W szablon klasy root, należy przekazać $ imprezę do rozmowy loggedin: zmienna wydarzenie

(loggedIn) = "loggedIn($event)" 

$ reprezentuje obiekt, który przechodzą w następnej metody swojego emitera loggedin w klasie logowania. Oczywiście, twoja metoda loggedIn twojej klasy Root powinna również zaakceptować obiekt jako argument.

Answer 4

Sam walczyłem z tym problemem.

Przyczyna, dla której nie działa, wynika z przypadku nazwy wydarzenia. Jeśli zostałoby to nazwane loggedin, a nie zalogowane, byłoby w porządku.

Answer 5

W moim przypadku zapomniałem ozdobić członka klasy numerem @Output(), np.

@Output() close: EventEmitter<DialogResult> = new EventEmitter<DialogResult>();