Angular 导航后显示快餐栏

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([``]) returns 您可以订阅的承诺。这个promise会在导航成功后执行。请参阅此 Documentation 了解更多信息。

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

Answer 2

您可以显示消息然后导航：

使用 afterDismissed() 方法：

this.snackBar.open('msg', 'close', {
                  duration: 2000
                }).afterDismissed().subscribe(()=>{
                  this.router.navigate(['']);
                });

Angular 导航后显示快餐栏

Angular show snackbar after navigation

angular

angular-router