カスタムダイアログコンポーネントのEventEmitter

Question

私はカスタムのダイアログコンポーネントを持っています。ダイアログコンポーネントの内部でサービスを使用する代わりに、イベントエミッタを使用して親コンポーネントのサブスクリプションにサブスクライブする必要があります。

これは可能なのでしょうか？

Answer 1

のバージョン2.0.0で可能です。ここでは、これがどのように機能するかを示して取り組んplnkrは次のとおりです。http://plnkr.co/edit/MSBlJm2ZKtTvMSgf27Yd?p=preview

あなたが定期的にコンポーネントを作成する必要があります。

@Component({ 
    selector: 'dialog-content', 
    templateUrl: 'dialog-content.component.html' 
}) 
export class DialogContentComponent { 

    @Output() emitter = new EventEmitter(); 
    @Input() dialog: MdlDialogComponent; 

    // or this way: constructor(private dialog: MdlDialogComponent){} 

    fireEvent() { 
    this.emitter.emit(1); 
    } 

    closeDialog() { 
    this.dialog.close(); 
    } 
} 

HTMLは次のようになります。

<p> 
    <button 
     mdl-button 
     mdl-button-type="raised" 
     mdl-colored="primary" 
     mdl-ripple 
     (click)="fireEvent()">Fire event</button> 

    <button 
     mdl-button 
     mdl-button-type="raised" 
     mdl-colored="accent" 
     mdl-ripple 
     (click)="closeDialog()">Close dialog </button> 
</p> 

あなたがそこにある見ることができるように2つのボタン。 1つはボタンがクリックされるたびに1番の数字を発します。もう一方のボタンはダイアログを閉じます。

ここで興味深い部分：これを使用する方法。あなたは、コンテンツとして、あなたのコンポーネントが埋め込まれmdl-dialogを作成する必要があります。

<button 
     mdl-button 
     mdl-button-type="raised" 
     mdl-colored="primary" 
     mdl-ripple 
     (click)="testDialog.show()">Open dialog</button> 

    Counter: {{counter}} 

    <mdl-dialog #testDialog> 
     <dialog-content [dialog]="testDialog" (emitter)="onEmitting($event)"></dialog-content> 
    </mdl-dialog> 

mdl-dialogがtestDialog定数によって参照され、エミッタが登録されています。ボタンをクリックするとダイアログが表示されます。 「Fire event」ボタンをクリックすると、イベントは外部コンポーネントによってキャッチされ、カウンターがインクリメントされて動作することが示されます。スクリーンショットは次のとおりです。