2017-01-31 8 views
-1

カスタムディレクティブからイベントを受信しようとしていますが、動作していません。私は正常にイベントを送信する私のアプリケーションでいくつかのコンポーネントを持っているので、私は、最小限の例を作った:カスタムディレクティブの出力が受信されません。

<div *appDummyDirective="allTheThings" (dummyOutput)="dummyOuputDirective()"> 
    appDummyDirective 
</div> 
<appDummyComponent (dummyOutput)="dummyOuputComponent()"></appDummyComponent> 

ディレクティブのコールバックがないときにコンポーネントのコールバックが呼び出されます。

ここ
dummyOuputComponent() { 
    console.log('dummyOuputComponent()'); //gets called 
} 

dummyOuputDirective() { 
    console.log('dummyOuputDirective()'); //does not get called! 
} 

は、指令とコンポーネントの定義です。

@Directive({ 
selector: '[appDummyDirective]' 
}) 

export class DummyDirective{ 
    @Output() dummyOutput = new EventEmitter<any>(); 
    @Input() appDummyDirective: any; 

    constructor(private viewContainer: ViewContainerRef, private template: TemplateRef<any>) { 
     this.viewContainer.createEmbeddedView(this.template); 
     setInterval(any => { this.dummyOutput.emit(null); console.log('fire dummy directive'); }, 1000); 
    } 
} 

@Component({ 
    selector: 'appDummyComponent', 
    template: 'appDummyComponent' 
}) 

export class DummyComponent{ 
    @Output() dummyOutput = new EventEmitter<any>(); 

    constructor() { 
     setInterval(any => { this.dummyOutput.emit(null); console.log('fire dummy component'); }, 1000); 
    } 
} 

私はこの指令に間違っていましたか?

+0

これは機能しません。 –

+0

ディレクティブに@Outputデコレータを使用することはできませんか? – stj242

+0

**構造**指令が必要ですか? '* appDummyDirective'の代わりに' appDummyDirective'を使用できませんでしたか? – AngularChef

答えて

0

明らかに@Outputは、構文糖で*とは機能しません。

ディレクティブを無効にして、template要素にコールバックバインディングを適用すると機能します。

<template [appDummyDirective]="allTheThings" (dummyOutput)="dummyOuputDirective()"> 
    <div > 
     appDummyDirective 
    </div> 
</template> 
関連する問題