我编写了一个使用EventEmitter类的基本角度应用程序,但是我无法使用侦听组件来捕获事件。
这是我的代码(在Angular2 / TypeScript 1.5上使用alpha.27编译为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;
}
}
答案 0 :(得分:9)
以下是您应用的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
。
答案 1 :(得分:4)
我自己也在努力解决这个问题。
它不起作用的原因是由于事件名称的情况。如果这被命名为loggedin而不是loggedIn,那就没关系了。
答案 2 :(得分:3)
在Root类的模板中,您应该将$ event传递给loggedIn调用:
(loggedIn) = "loggedIn($event)"
$ event变量表示您在Login类中的loggedIn发射器的下一个方法中传递的对象。当然,Root类的loggedIn方法也应该接受一个对象作为参数。
答案 3 :(得分:1)
在我的情况下,我忘了用@Output()
装饰班级成员,例如
@Output() close: EventEmitter<DialogResult> = new EventEmitter<DialogResult>();
答案 4 :(得分:0)
你见过这个example吗? Viktor Savkin几乎使用与你相同的所有东西,但在这一行中没有空物体:
this.complete.next();
在AngularU上,Misko展示了一个使用EventEmitter的示例:https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update 从41:00开始