4

很簡單的基類Closer角2基類輸出EventEmitter沒有得到提升或處理

import {EventEmitter, Output} from 'angular2/core'; 

export class Closer { 
    @Output() closed: EventEmitter<any> = new EventEmitter(); 

    constructor() {} 

    close() { 
    this.closed.emit({}); 
    } 
} 

如果我extends Closer另一個類,然後用

<derived-class (closed)="closeHandler()"></derived-class> 

closeHandler()標記它永遠不會調用。我可以看到Closer.close()被調用,但是emit不會被派生類傳播,或者被其模板包含派生類和事件綁定的類處理。

如果我只是將@Output移動到派生類中,它就可以工作。但是,似乎Angular2應該把它放在派生類上。完全定義一組行爲並繼承它的能力會很好。

回答

6

今天早上我有同樣的問題,只是想出瞭如何做到這一點。所有您需要做的就是添加輸出: [「關閉」]到正在延伸的更緊密的派生類的部件部分,你必須從關閉聲明除去@Output()更緊密類內部

這是根據您的例子一個快速演示:

派生類:

@Component({ 
    selector: 'derived-class', 
    outputs: ['closed'] 
}) 
export class DerivedClass extends Closer {} 

仔細類:

import {EventEmitter} from 'angular2/core'; 

export class Closer { 
    closed: EventEmitter<any> = new EventEmitter(); 

    constructor() {} 

    close() { 
    this.closed.emit({}); 
    } 
} 
+0

謝謝!請注意,如果您使用的是tslint,您可以使用'// tslint:disable-next-line:use-output-property-decorator'來禁用linter錯誤 – Jessycormier