Angular 5 Loader Service组件调用失效问题求助

嘿，我来帮你排查这个问题！你遇到的情况是路由导航时Loader Service能正常触发订阅，但手动调用toggle()时订阅收不到通知，这大概率是Service实例不唯一或者Zone相关的变更检测问题导致的，下面给你一步步解决：

先排查最常见的原因：Service不是单例 #

如果你的LoaderService没有在根模块统一注册，而是在多个组件/模块的providers数组里重复声明，那每个地方都会创建一个新的Service实例。比如你在app.component里订阅的是实例A，而在其他组件里调用toggle()的是实例B，自然收不到通知！

修复方式：确保Service是全局单例 #

在Angular 5里，有两种方式保证单例：

1. 在根模块AppModule的providers里注册：

// app.module.ts
import { LoaderService } from './your-path/loader.service';

@NgModule({
  declarations: [/* ... */],
  imports: [/* ... */],
  providers: [LoaderService], // 只在这里注册一次！
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 用providedIn: 'root'装饰器（Angular 5+支持）：
   直接修改你的Loader Service的装饰器，这样Angular会自动把它注册为全局单例，不用在模块里加providers：

@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  // ... 你的原有代码
}

验证单例的方法：在Loader Service的构造函数里加一行console.log('Loader Service instance created')，刷新页面后如果只打印一次，说明是单例了。

然后检查变更检测的问题 #

看你代码里toggle方法注释掉了ngZone.runOutsideAngular，虽然现在注释了，但有时候手动调用时，值的变更可能不在Angular的Zone内，导致UI不更新。可以把next操作放到ngZone.run()里，确保Angular能检测到变化：

public toggle(visible: boolean) {
  console.log('toggled ' + visible);
  this.ngZone.run(() => {
    this.loaderShown$.next(visible);
  });
}

最后检查订阅的生命周期（可选） #

如果你的订阅是在子组件里，要确保没有提前取消订阅。比如手动订阅的话，记得在组件销毁时取消：

// 子组件里的代码示例
import { Subscription } from 'rxjs';

private loaderSubscription: Subscription;

ngOnInit() {
  this.loaderSubscription = this.loaderService.loaderShown$.subscribe(shown => {
    this.loaderShown = shown;
  }, err => console.error(err));
}

ngOnDestroy() {
  if (this.loaderSubscription) {
    this.loaderSubscription.unsubscribe();
  }
}

不过你的情况是在app.component里订阅，这个组件一般不会销毁，所以这个可能不是主要问题，但养成好习惯总是没错的。

测试验证 #

做完上面的修改后，在任意组件里调用this.loaderService.toggle(true)，看控制台是否打印toggled true，同时app.component里的loaderShown是否同步变成true。如果还是不行，检查一下有没有地方不小心重新赋值了loaderShown$（比如this.loaderShown$ = new BehaviorSubject(false)），这会导致旧的订阅失效。

内容的提问来源于stack exchange，提问作者Branislav B.