Не удалось поймать события EventEmitter в Angular2?

Question

Я написал базовое угловое приложение, которое использует класс EventEmitter, однако я не могу заставить компонент прослушивания поймать событие.

Вот мой код (используя альфа.27 на Angular2/TypeScript 1.5 для ES5) Извиняется за подробный пример.

Любые советы о том, что я неправильно делаю, что было бы весьма полезно.

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

Это a working Plunker вашего приложения.

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

Я думаю, что было несколько проблем. (update) в шаблоне - это тип события, поэтому его нельзя назвать loggedIn. Мне было проще просто вызвать событие update вообще.

Answer 2

Вы видели это example? Виктор Савкин использует почти все то же самое, как вы, но без пустого объекта в этой строке:

this.complete.next(); 

На AngularU, Мисько показал пример с EventEmitter: https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update начиная с 41:00

Answer 3

В шаблон класса Root, вы должны пройти $ событие в вызов LoggedIn: переменная событие

(loggedIn) = "loggedIn($event)" 

в $ представляет собой объект, который вы передаете в следующем методе вашего LoggedIn эмиттера в Вход классе. Конечно, ваш метод loggedIn вашего класса Root также должен принимать объект в качестве аргумента.

Answer 4

Я просто боролся с этой проблемой.

Причина, по которой она не работает, связана с случаем имени события. Если бы это было названо loggedin, а не loggedIn, это было бы хорошо.

Answer 5

В моем случае я забыл украсить элемент класса @Output(), например.

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