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代码，但该代码不包含在您的问题中。

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

在某些情况下，Angular 2.0.0 [隐藏]不会运行

1 个答案: