Angular 5 - сервис погрузчика не работает.

Question

Мне нужно создать сервис для моего приложения 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 в компоненте, он ничего не делает - значение не передается.Похоже, подписка была отменена.Но когда я перехожу на другую страницу, она снова работает (что странно).Знаете ли вы, как решить эту проблему?

Answer 1

Проблема была в том, что Angular не рассматривал сервис как одиночный объект в моей лениво загруженной структуре.Я смог решить эту проблему путем обновления модуля te, в котором находится служба, и определения его как forRoot () в AppModule.Это гарантирует, что обслуживание является единственным.