导航后 Angular 显示小吃栏

Question

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

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

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

像这样的东西：

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

我的小吃吧服务：

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([``])返回您可以订阅的承诺。该承诺将在导航成功后执行。请参阅此文档以获取更多信息。

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