How to emit event when using snack-bar (entryComponents) in angular2

Question

Here I had a method 'confirmSth', loaded a component 'SnackCheckBoxComponent' dynamically.

I would like to know If I can get some msg in my OrderDetailComponent to distinguish which button from SnackCheckBoxComponent i clicked so to decide the confirmSth return true or 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();
  }
}

here is my './snack-check-box.html'

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

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

Answer 1

Create two RxJS subjects inside the SnackCheckBoxComponent and invoke a next value using your bound functions; here's an example with only submit functionality.

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

Now from your OrderDetailComponent, you can subscribe to these events:

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

Note that since I've used .take(1) you do not have to manually unsubscribe from this subscription. The stream will end after taking one and only item which we expect. Alternatively, you could use Observable#toPromise here.

---

As a side note, your onCancel and onSubmit must be public since you're accessing them from the template (outside the class). Templates are currently not type-checked in JIT mode, but your code would fail in AOT which is becoming a standard for Angular applications.