无法从 Angular2 中的 EventEmitter 中捕获事件？答案

【问题标题】：Unable to catch events from EventEmitter in Angular2?无法从 Angular2 中的 EventEmitter 中捕获事件？
【发布时间】：2015-06-24 06:31:42
【问题描述】：

我编写了一个使用 EventEmitter 类的基本 Angular 应用程序，但是我无法让监听组件捕获事件。

这是我的代码（在 Angular2 上使用 alpha.27 / 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; 
    }

}

【问题讨论】：

感谢您的回复。我试过： (^loggedIn)="loggedIn()" 但这并没有解决问题。
我们可以删除这个问题吗？这很令人困惑，因为 ng2 已经更新，现在问题和答案都不是最新的

标签： typescript eventemitter angular typescript1.5

【解决方案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 会更容易。

【讨论】：

【解决方案2】：

我自己只是在这个问题上苦苦挣扎。

它不起作用的原因是由于事件名称的大小写。如果这被命名为loginin 而不是loggedIn 那就没问题了。

【讨论】：

我刚刚发现，如果你想为你的自定义事件使用混合大小写的名字，你可以使用'loggedIn'作为变量名，'logged-in'作为HTML中的事件名.像这样... (logged-in)="handler()"

【解决方案3】：

在 Root 类的模板中，您应该将 $event 传递给 loggedIn 调用：

(loggedIn) = "loggedIn($event)"

$event 变量表示您在 Login 类中的 loggedIn 发射器的 next 方法中传递的对象。当然，您的 Root 类的 loggedIn 方法也应该接受一个对象作为参数。

【讨论】：

另外，在 Root 后面的代码中，你应该声明：loggedIn(obj) { console.log("event catch"); this.showApp = true; }
这个其实是没有效果的。当事件类型为(update) 时，该问题与左侧的(event) 被称为(loggedIn) 有关。

【解决方案4】：

就我而言，我忘了用@Output() 来装饰班级成员，例如

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

【讨论】：

【解决方案5】：

你看到这个example了吗？ Viktor Savkin 使用的几乎所有东西都和你一样，但在这一行中没有空对象：

this.complete.next();

在 AngularU 上，Misko 展示了一个带有 EventEmitter 的示例：https://angularu.com/VideoSession/2015sf/angular-2-roadmap-update 41:00 开始

【讨论】：

如果我不传递任何参数，我会得到以下编译器错误：错误 TS2346：提供的参数与调用目标的任何签名都不匹配。
这个没有效果，你可以传递一个对象或者简单的调用Event Emitter。