Angular 执行Router.navigate路由跳转后如何显示成功提示弹窗

以下是两种常见场景的可落地实现方案：

场景1：全局悬浮提示（无需和目标页面耦合） #

this._router.navigate 本身返回Promise<boolean>类型，跳转成功会resolvetrue，跳转失败则resolvefalse，直接在then回调中执行提示逻辑即可：

// 先注入你使用的提示服务，比如Angular Material的MatSnackBar，或者自定义的提示服务
constructor(
  private _eventService: EventService,
  private _router: Router,
  private _snackBar: MatSnackBar // 示例用Angular Material全局提示组件
) { }

// 你的原有逻辑中修改navigate部分
if (err.status === 401) {
  this._router.navigate(['/home']).then(navSuccess => {
    // 仅跳转成功后弹出提示
    if (navSuccess) {
      // 3秒后自动消失的全局提示
      this._snackBar.open('新表单已成功添加', '关闭', { duration: 3000 });
      // 测试阶段也可以先用原生alert验证逻辑
      // alert('新表单已成功添加')
    }
  })
}

如果使用其他UI组件库，替换对应的提示调用代码即可。

场景2：提示需要在跳转后的目标页面（home页）指定位置展示 #

如果需要提示渲染在home页的固定位置，推荐两种实现方式：

方式A：路由传参（简单直观） #

跳转时携带成功标识参数：

this._router.navigate(['/home'], {
  queryParams: { formSubmitSuccess: '1' }
})

在home组件中接收参数并弹出提示：

// home.component.ts
import { ActivatedRoute, Router } from '@angular/router';

constructor(
  private _activatedRoute: ActivatedRoute,
  private _router: Router,
  private _snackBar: MatSnackBar
) {}

ngOnInit() {
  this._activatedRoute.queryParams.subscribe(params => {
    if (params['formSubmitSuccess'] === '1') {
      this._snackBar.open('新表单已成功添加', '关闭', { duration: 3000 });
      // 可选：清除URL中的参数，避免刷新页面重复弹出
      this._router.navigate([], {
        relativeTo: this._activatedRoute,
        queryParams: { formSubmitSuccess: null },
        queryParamsHandling: 'merge'
      })
    }
  })
}

方式B：全局共享服务（不暴露参数在URL） #

适合不想在地址栏显示额外参数的场景，先创建全局共享的通知服务：

// notify.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class NotifyService {
  private successMsg$ = new BehaviorSubject<string | null>(null);

  // 订阅消息
  getSuccessMsg() {
    return this.successMsg$.asObservable();
  }

  // 设置消息
  setSuccessMsg(msg: string) {
    this.successMsg$.next(msg);
  }

  // 清空消息
  clearMsg() {
    this.successMsg$.next(null);
  }
}

跳转前存入提示消息：

// 原组件中先注入NotifyService
this._notifyService.setSuccessMsg('新表单已成功添加');
this._router.navigate(['/home']);

在home组件中订阅消息：

// home.component.ts
ngOnInit() {
  this._notifyService.getSuccessMsg().subscribe(msg => {
    if (msg) {
      this._snackBar.open(msg, '关闭', { duration: 3000 });
      // 弹出后清空消息，避免重复触发
      this._notifyService.clearMsg();
    }
  })
}

内容的提问来源于stack exchange，提问作者Omar Bouattour