时间戳

首页 > 解决方案 > Angular 5 - 加载器服务不工作。

angular - Angular 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);
    }
} 
}

在 app.component 我订阅了服务：

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

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

标签： angulartypescriptrxjsangular5

解决方案

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

推荐阅读