2016-01-05 25 views
1

我試圖構建一個發射自定義事件的組件。我不知道爲什麼事件沒有被觸發。 如果我看看瀏覽器開發人員工具,我可以看到事件被附加到元素。Angular 2 @Output什麼都不做

我甚至試圖創建一個由角度文檔提供的小例子: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。

注意:我正在使用角度2 - beta0

我是否錯過了什麼? 謝謝

回答

8

不要再使用kebab-case瞭解事件和屬性。使用camelCase

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

謝謝。現在正在工作。應該更新角度文檔。 –