Angular ToastMessagesComponent未触发，通过service调用不加载如何解决？

1. 组件未实例化（最高概率） #

• 仅在app.module.ts的declarations数组中声明组件不会触发组件实例化，你需要将ToastMessagesComponent的自定义标签（通常为<app-toast-messages></app-toast-messages>）添加到已渲染的父组件模板中，最通用的位置是app.component.html的全局层级
• 你配置到路由后可以正常加载，本质是路由出口<router-outlet>帮你完成了组件的实例化操作；直接调用service时组件未被创建，自然不会执行订阅逻辑，也不会渲染弹窗

2. 状态事件丢失 #

• 普通Subject不会缓存已发送的事件，如果app.component.ts的ngOnInit调用show()的时机早于ToastMessagesComponent的订阅时机，状态事件会在无订阅者的情况下直接丢失，后续组件订阅后也拿不到之前发送的显隐指令
• 解决方法：将toastMessageService.ts中维护状态的普通Subject替换为BehaviorSubject，设置初始值{show: false, status: '', message: ''}；或者替换为ReplaySubject(1)缓存最近1次状态事件，保证后续订阅的组件能拿到最新的状态

3. 服务实例不唯一 #

• 即使你声明了服务为root级注入，若你在ToastMessagesComponent的providers数组中重复声明了ToastMessageService，会导致组件拿到独立的服务实例，和app component调用的服务不是同一个，自然收不到状态变更通知
• 排查方法：分别在服务构造函数、app component构造函数、ToastMessagesComponent构造函数中打印实例标识，确认三者是否为同一个实例
• 解决方法：删除组件providers配置中重复声明的ToastMessageService即可

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