Angular：resolve()失败时如何显示Toast并停留在当前页面

我来帮你梳理下问题所在，以及正确的解决思路：

为什么你的当前方案行不通？ #

1. 直接注入组件实例是错误的：MessageToastComponent是UI组件，不是服务。你在Resolver里注入的组件实例，和页面上实际渲染的Toast组件完全不是同一个对象，所以修改它的属性根本不会影响页面上的Toast显示。
2. 返回Observable.empty()会让路由继续跳转：当Resolver返回空Observable时，Angular路由器会认为resolve操作"成功完成"，所以会继续跳转到Settings页面，这和你想要停留原页面的需求相反。
3. 没有正确阻止路由导航：resolve失败时，你需要明确告诉路由器取消这次导航。

正确的解决方案步骤 #

第一步：创建Toast管理服务

我们需要一个单例服务来统一管理Toast的显示逻辑，这样任何组件或服务（包括Resolver）都能调用它来触发Toast：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable({
  providedIn: 'root'
})
export class ToastService {
  // 用Subject来传递Toast显示指令
  private toastTrigger = new Subject<{ message: string, type: string }>();
  toast$ = this.toastTrigger.asObservable();

  showToast(message: string, type: string = 'error') {
    this.toastTrigger.next({ message, type });
  }
}

第二步：修改Toast组件订阅服务

让Toast组件监听服务的事件，自动显示/隐藏：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ToastService } from '../../services/toast.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-message-toast',
  templateUrl: './message-toast.component.html',
  styleUrls: ['./message-toast.component.css']
})
export class MessageToastComponent implements OnInit, OnDestroy {
  showToastMessage = false;
  toastMessage = '';
  toastClass = 'success';
  private toastSub: Subscription;

  constructor(private toastService: ToastService) { }

  ngOnInit() {
    // 订阅服务的Toast事件
    this.toastSub = this.toastService.toast$.subscribe(toastData => {
      this.toastMessage = toastData.message;
      this.toastClass = toastData.type;
      this.showToastMessage = true;

      // 5秒后自动隐藏
      setTimeout(() => {
        this.showToastMessage = false;
      }, 5000);
    });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅，避免内存泄漏
    this.toastSub?.unsubscribe();
  }
}

第三步：修改Resolver实现正确逻辑

在Resolver里注入ToastService和Router，错误时显示Toast并阻止路由跳转：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
import { Observable } from "rxjs/Observable";
import { SettingsService } from "../../services/settings/settings.service";
import { ToastService } from '../../services/toast.service';

@Injectable()
export class SettingsResolverService implements Resolve<any> {
  constructor(
    private settingsService: SettingsService,
    private toastService: ToastService,
    private router: Router
  ) { }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.settingsService.getAllSettings()
      .catch(error => {
        console.log(error);
        // 显示错误Toast
        this.toastService.showToast('There was some error!', 'error');
        // 强制跳回Dashboard页面，确保用户停留在此
        this.router.navigate(['/dashboard']);
        // 返回错误Observable，告诉路由器resolve失败，取消导航
        return Observable.throw(error);
      });
  }
}

第四步：全局挂载Toast组件

在你的根组件（比如AppComponent）的模板里添加Toast组件，这样它可以在全局任何位置显示：

<!-- app.component.html -->
<app-message-toast></app-message-toast>

<!-- 其他页面内容 -->
<router-outlet></router-outlet>

关键逻辑说明 #

• 用服务做中间层：通过ToastService实现Resolver和Toast组件的通信，避免直接操作组件实例的错误做法。
• 阻止路由跳转：返回Observable.throw(error)会让路由器知道resolve失败，同时主动调用router.navigate确保用户停留在Dashboard页面。
• 全局Toast：把Toast组件放在根组件里，确保任何页面发生错误时都能显示提示。

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