Angular 2 @Output 什么都不做

Question

我正在尝试构建一个发出自定义事件的组件。我不确定为什么没有触发事件。 如果我查看浏览器开发人员工具，我可以看到事件附加到元素。

我什至尝试创建 angular 文档提供的小示例：https://angular.io/docs/ts/latest/api/core/Output-var.html，但没有成功。

下面是小代码：

import {Component} from "angular2/core";
import {Directive} from "angular2/core";
import {Output} from "angular2/core";
import {EventEmitter} from "angular2/core";
import {bootstrap}    from "angular2/platform/browser";

@Directive({
  selector: 'interval-dir',
})
class IntervalDir {
  @Output() everySecond = new EventEmitter();
  @Output('everyFiveSeconds') five5Secs = new EventEmitter();
  constructor() {
    setInterval(() => this.everySecond.emit("event"), 1000);
    setInterval(() => this.five5Secs.emit("event"), 5000);
  }
}
@Component({
  selector: 'app',
  template: `
    <interval-dir (every-second)="everySecond()" (every-five-seconds)="everyFiveSeconds()">
    </interval-dir>
  `,
  directives: [IntervalDir]
})
class App {
  everySecond() { console.log('second'); }
  everyFiveSeconds() { console.log('five seconds'); }
}
bootstrap(App);

没有抛出错误，也没有console.log。

注意：我使用的是 angular 2 - beta0

我错过了什么吗？ 谢谢

Answer 1

不要再将 kebab-case 用于事件和属性。使用 camelCase：

@Component({
  selector: 'app',
  template: `
    <interval-dir 
        (everySecond)="everySecond()" 
        (everyFiveSeconds)="everyFiveSeconds()"
    ></interval-dir>
  `,
  directives: [IntervalDir]
})
class App { /* ... */ }