角度5-装载机服务不工作。

我需要为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);
    }
} 
}

在应用程序中。我正在订阅服务的组件:

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

它就像一个符咒。然而,当我试图在组件中调用LoaderService的toggle方法时,它什么都不做——该值不在广播中。看起来订阅被取消了。但当我导航到另一个页面时,它又能工作了(这很奇怪)。你知道如何解决这个问题吗?