在Angular中是否可以创建可全局调用的通用toast组件？

该需求完全可以实现，核心通过单例服务作为全局事件总线，连接根组件中唯一的Toast实例和所有子组件的调用请求即可。

1. 创建全局单例Toast服务 #

新建toast.service.ts，用于接收子组件的调用请求，转发消息给Toast组件：

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
// 限定消息类型范围
export type ToastType = 'success' | 'error' | 'warning';

@Injectable({
  providedIn: 'root' // 根注入保证全局只有一个服务实例
})
export class ToastService {
  // 内部Subject用于发送消息
  private toastSubject = new Subject<{ content: string; type: ToastType }>();
  // 暴露Observable给Toast组件订阅
  toastObservable = this.toastSubject.asObservable();

  // 对外暴露的调用方法，子组件直接调用该方法即可
  showToast(content: string, type: ToastType) {
    this.toastSubject.next({ content, type });
  }
}

2. 改造ToastComponent组件，订阅服务消息 #

在toast.component.ts中注入Toast服务，收到消息后触发自身的显示逻辑：

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

@Component({
  selector: 'app-toast',
  templateUrl: './toast.component.html',
  styleUrls: ['./toast.component.css']
})
export class ToastComponent implements OnDestroy {
  private toastSub: Subscription;
  // 以下变量绑定到你的Toast模板做显示、样式控制
  visible = false;
  content = '';
  type = '';

  constructor(private toastService: ToastService) {
    // 订阅全局消息
    this.toastSub = this.toastService.toastObservable.subscribe(msg => {
      this.content = msg.content;
      this.type = msg.type;
      this.visible = true;
      // 原有自动关闭逻辑，比如3秒后隐藏提示
      setTimeout(() => this.visible = false, 3000);
    })
  }

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

3. 根模板引入Toast组件 #

在app.component.html中全局仅添加一次组件即可，不需要传任何参数：

<!-- 你的其他根布局代码 -->
<app-toast></app-toast>

4. 任意子组件调用触发 #

子组件不需要引入Toast组件，直接注入服务调用方法即可：

import { Component } from '@angular/core';
import { ToastService } from './toast.service';

@Component({
  selector: 'app-your-child',
  template: '<button (click)="submit()">提交</button>'
})
export class YourChildComponent {
  constructor(private toastService: ToastService) {}

  submit() {
    // 成功提示
    this.toastService.showToast('提交成功', 'success');
    // 错误提示调用示例：this.toastService.showToast('提交失败', 'error');
    // 警告提示调用示例：this.toastService.showToast('请先完成必填项', 'warning');
  }
}

如果之前调试未生效，可优先排查以下问题：

• 不要在除根模块外的其他模块、组件的providers数组中声明ToastService，会导致生成多个服务实例，消息无法互通
• 如果项目使用了路由懒加载，确认ToastService没有在懒加载模块中重复声明
• 消息订阅逻辑要写在ToastComponent内部，不要写在其他父组件中

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