Angular 5 - 加载器服务不工作。答案

【问题标题】：Angular 5 - loader service not working.Angular 5 - 加载器服务不工作。
【发布时间】：2018-05-22 16:46:47
【问题描述】：

我需要为我的 Angular 5 应用程序创建一个服务，该服务将在路由器加载页面时显示一个加载器。到目前为止，这是我想出的：

@Injectable()
export class LoaderService {
public loaderShown$ = new BehaviorSubject<boolean>(false); 

constructor(public router: Router, private ngZone: NgZone, public logger: LoggerService) {
    router.events.subscribe((event: RouterEvent) => {
        this.interceptNavigation(event)
    })
}

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

private interceptNavigation(event: RouterEvent) {
    if (event instanceof NavigationStart) {
        this.toggle(true);           
    }

    if (event instanceof NavigationEnd) {
        this.toggle(false); 
    }
    if (event instanceof NavigationCancel) {
        this.toggle(false);
    }
    if (event instanceof NavigationError) {
        this.toggle(false);
    }
} 
}

在 app.component 我订阅了服务：

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

它就像一个魅力。但是，当我尝试在组件中调用 LoaderService 的切换方法时，它什么也没做 - 值没有广播。订阅好像被取消了。但是当我导航到另一个页面时，它又可以工作了（这很奇怪）。你知道如何解决这个问题吗？

【问题讨论】：

您是否多次提供了LoaderService？（意思是它在多个模块的providers 数组中？）
您是否能够在您的 javascript（来自 Web 浏览器）中放置断点以根据您的逻辑跟踪操作流？此外，在切换显示/隐藏时进行同步也很重要，这样您就有足够的时间查看加载，否则加载器几乎会立即显示和隐藏，而您不会注意到这一点。
不，它只定义在一个模块中。我也调试了应用程序。当我在服务上调用切换方法时，它会被调用，但不会触发 app.component 中的订阅。

标签： angular typescript rxjs angular5

【解决方案1】：

问题在于 Angular 在我的延迟加载结构中没有将服务视为单例。我已经能够通过更新服务所在的模块来解决这个问题，然后在 AppModule 中将其定义为 forRoot()。这确保了服务是单例的。

【讨论】：