Angular中mat-spinner加载组件不触发问题求助

问题核心 #

你在应用层级（app.component.ts）和页面组件（page.component.ts）重复声明了LoadingService为提供者，导致Angular创建了两个独立的服务实例：

• app.component内的LoadingComponent监听的是应用层级服务实例的loading$状态
• 页面组件调用loadingOn()时，修改的是页面组件自己的服务实例的loading$状态
  两者状态完全隔离，所以即使控制台显示页面实例的loading$为true，应用层的加载组件也接收不到状态变化。

修复步骤 #

1. 删除页面组件的服务提供者：移除page.component.ts中@Component装饰器providers数组里的LoadingService
2. 确保服务单例化：
   • 最优方式是给LoadingService添加@Injectable({ providedIn: 'root' })装饰器，Angular会自动在根层级提供单例服务，无需手动在app.component或其他组件声明提供者
   • 若不想用providedIn: 'root'，仅保留app.component.ts中的providers声明，确保全应用只有一个服务实例
3. 验证状态同步：修改后调用页面组件的loadingOn()，此时应用层的LoadingComponent会接收到同一个loading$的状态变化，mat-spinner将正常显示

额外检查项 #

• 确认LoadingService中的loading$是BehaviorSubject或ReplaySubject（保证新订阅者能获取最新状态）
• 检查LoadingComponent模板中async管道绑定是否正确，比如：<mat-spinner *ngIf="loading$ | async"></mat-spinner>

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