javascript - Angular 2.0.0 [隐藏] 在某些情况下无法运行

Question

我使用[hidden]进行布局:

<main id="content" class="content view-animate fade-up" role="main">
    <div [hidden]="!preloader.isLoading">
          <img class="absolute-center" src="/assets/img/cube.svg" alt="Loading..."/>
    </div>
    <div [hidden]="preloader.isLoading">
          <router-outlet></router-outlet>
    </div>
</main>

我有服务来处理这个问题:

export class PreloaderService {
    private _isLoading: boolean = false;
    constructor(router:Router) {
        router.events.subscribe((event) => {
            console.log('event',event);
            if(event instanceof NavigationStart) {
                this._isLoading = true;
            }
            if(event instanceof NavigationCancel || event instanceof NavigationError || event instanceof NavigationEnd ) {
                this._isLoading = false;
            }
        });
    }
    get isLoading() {
        return this._isLoading;
    }
}

问题:当我使用 Facebook 帐户登录时，我看到加载程序，然后是我的目标页面。如果我在那之后立即注销，并再次使用 FB 登录，则会触发 NavigationEnd 事件，preloader.isLoading 的值更改为 false，但是加载图片仍然可见。如果我单击某些内容(例如在页面区域附近的菜单中)-页面变得可见并且加载程序消失。如果我注销后重新加载页面，则页面加载将正常处理。

Answer 1

这听起来像是一些回调在 Angulars 区域之外运行。

export class PreloaderService {

    private _isLoading: boolean = false;

    constructor(router:Router, cdRef:ChangeDetectorRef) { // <<<=== modified
        router.events.subscribe((event) => {
            console.log('event',event);
            if(event instanceof NavigationStart) {
                this._isLoading = true;
                cdRef.detectChanges(); // <<<=== added
            }
            if(event instanceof NavigationCancel || event instanceof NavigationError || event instanceof NavigationEnd ) {
                this._isLoading = false;
                cdRef.detectChanges(); // <<<=== added
            }
        });
    }
    get isLoading() {
        return this._isLoading;
    }
}

最好使用 zone.run()，其中回调调用区域外的 Angular2 代码，但该代码不包含在您的问题中。

上面的代码至少应该可以验证我的假设是否正确。