导航后的 Angular 显示 snackbar

Question

我有两个组件。在成功的服务器响应的第一个中，我想执行以下操作:

this.router.navigate(['']);
this.snackBarMessage = 'Successfully submitted';

然后页面被重定向到另一个组件，我想在那里显示snackBarMessage消息，例如(ngOnInit())

类似的东西:

this.snackBarService.openSnackBar(snackBarMessage, 'Close', 9999999);

我的snackBarService:

import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class SnackBarService {

  constructor(private matSnackBar: MatSnackBar) { }

  openSnackBar(message: string, action: string, duration?: number) {
    this.matSnackBar.open(message, action, { duration });
  }
}

我怎样才能做到这一点？导航后如何将 snackBarMessage 传递给另一个组件？

Answer 1

this.router.navigate([``]) 返回一个您可以订阅的 promise 。这个promise会在导航成功后执行。请看这个Documentation了解更多信息。

this.router.navigate(['']).then((navigated: boolean) => {
    if(navigated) {
      this.snackBarService.openSnackBar(snackBarMessage, 'Close', 9999999);
    }
});