angle2のsnack-bar（entryComponents）を使用してイベントを発生させる方法

Question

ここでは、 'confirmSth'メソッドがあり、 'SnackCheckBoxComponent'コンポーネントが動的にロードされました。

私が知りたいのは、注文したSnackCheckBoxComponentのボタンを区別するために私のOrderDetailComponentにいくつかのmsgを渡すことができるのかどうかを確認するためです。 confirmSthはtrueまたはfalseを返します。ここ

//... 
import { MdSnackBar, MdSnackBarRef } from '@angular/material'; 

export class OrderDetailComponent { 

    constructor(public snackBar: MdSnackBar) { 

    confirmSth(): boolean { 

    // ...condition 
    if (condition) return true 

    this.snackBarRef = this.snackBar.openFromComponent(SnackCheckBoxComponent, { duration: 50000 }) 
    this.snackBarRef.instance.snackBarRefCheckComponent = this.snackBarRef 

    // I would like to know If I can get some msg here to distinguish which button i clicked so to decide return true or false. 

    } 

} 

@Component({ 
    selector: 'snack-check-box', 
    templateUrl: './snack-check-box.html', 
    styleUrls: ['./snack-check-box.css'], 
}) 
export class SnackCheckBoxComponent { 
    public snackBarRefCheckComponent: MdSnackBarRef<SnackCheckBoxComponent> 

    private onCancel() { 
    alert('clicked option 1'); 
    this.snackBarRefCheckComponent.dismiss(); 
    } 

    private onSubmit() { 
    alert('clicked option 2'); 
    this.snackBarRefCheckComponent.dismiss(); 
    } 
} 

は

<span>overloaded, whether to continue xxx</span> 

<a (click)="onSubmit()">yes</a> 
<a (click)="onCancel()">no</a> 

Answer 1

がSnackCheckBoxComponent内部の2つのRxJS科目を作成し、バインドされた関数を使用してnext値を呼び出す私の './snack-check-box.html' です。ここには機能を提出するだけの例があります。あなたのOrderDetailComponentから今

export class SnackCheckBoxComponent { 
    public submit$ = new Subject<void>() 
    public onSubmit() { this.submit$.next(null) } 
} 

、あなたはこれらのイベントをサブスクライブすることができます：私が使用したので、.take(1)手動でこのサブスクリプションの購読を解除する必要がないこと

this.snackBarRef.instance.submit$.take(1).subscribe(() => { 
    // handle submission here 
} 

注意。ストリームは、私たちが期待している唯一のアイテムを取った後に終了します。また、ここでObservable#toPromiseを使用することもできます。サイドノートとして

---

あなたは（クラス外）テンプレートからそれらにアクセスしていることから、あなたのonCancelとonSubmitはpublicでなければなりません。テンプレートは現在JITモードではタイプチェックされていませんが、Angularアプリケーションの標準となっているAOTでコードが失敗します。