angular - 如何在服务上使用 SnackBar 以在 Angular 2 中的每个组件中使用

Question

我有一个工作的 snackbar ，但它只在每个组件上，我想将它添加到我的服务中，所以我将调用它。这是我在 component.ts

上的示例

import { MdSnackBar, MdSnackBarRef } from '@angular/material';
...
export class EmployeeListComponent implements OnInit {
  public toastRef: MdSnackBarRef<any>;
  constructor(private _activatedRoute:ActivatedRoute,private router: Router, private http:PMISHttpService, private toast: MdSnackBar) {

  ngOnInit() {
    this.notify('test');
  }
  ...
  notify (text: string) {
    this.toastRef = this.toast.open(text, null);
    setTimeout(() => {
      this.toastRef.dismiss();
    }, 5000);
  }
  ...
}

Answer 1

如果您希望 SnackBar 在您的整个应用程序中工作，您应该将它放入您的 app.component 并通过服务与其通信。

notification.service.ts:

public notification$: Subject<string> = new Subject();

应用程序组件.ts:

constructor(
  private notificationService: NotificationService, private snackBar: MatSnackBar
) {
  this.notificationService.notification$.subscribe(message => {
    this.snackBar.open(message);
  });
}

任何.component.ts:

this.notificationService.notification$.next('this is a notification');