1

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

我什至尝试创建角度文档提供的小示例: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

我错过了什么吗?谢谢

4

1 回答 1

8

不要再将 kebab-case用于事件和属性。使用骆驼案例

@Component({
  selector: 'app',
  template: `
    <interval-dir 
        (everySecond)="everySecond()" 
        (everyFiveSeconds)="everyFiveSeconds()"
    ></interval-dir>
  `,
  directives: [IntervalDir]
})
class App { /* ... */ }
于 2016-01-05T15:03:26.023 回答