NgZone.run搞砸了AngularMaterial2组件

Question

我创建了一个使用AngularFire2和Angular Material的项目。我一直在通过Observable使用AngularFire2 Auth的onAuthStateChanged方法观察经过身份验证的用户状态。如果方法返回null，则应用应重定向到登录页面，如果不是，则应显示主页面。看看：

简要app.component.html：

<router-outlet *ngIf="isServiceReady"></router-outlet>

<mat-spinner *ngIf="!isServiceReady mode="indeterminate"></mat-spinner>

简要app.component.ts：

this.signInService.watchAuthUser()
  .subscribe(next => {
    if (next) {
      this.router.navigateByUrl('main');
      this.isServiceReady = true;

    } else {

      this.router.navigateByUrl('sign-in');
      this.isServiceReady = true;
    }
  });

WatchAuthUser方法：

watchAuthUser(): Observable<User> {
  return new Observable(subscriber => {
    this.fireAuth.auth.onAuthStateChanged(() => {
      subscriber.next(this.getUnsafeAuthUser());
    });
  });
}

问题是Angular无法检测到isServiceReady更改。正如here以及StackOverflow上的许多其他类似问题所示，解决方案是将我的代码包装在ngZone.run中，但是使用Angular Material无法完成，如here所示。如果尝试：

，会发生这种情况

登录页面：

主页：

奇怪的是，相同的代码适用于Promise而不是Observable，但我无法使用它，因为resolve只运行一次，用户状态在登录后立即更改注销，所以代码必须运行多次。我也尝试在watchAuthUser方法中使用参数函数，但angular也没有检测到更改。

有没有人知道解决这个问题的方法？