angular - AngularFire 订阅在我的组件中只触发一次，但在我的 html 模板中工作正常

Question

我正在使用 firebase 构建一个 Angular 登录应用程序，并且我正在尝试在我的组件中订阅用户 Observable，如下所示：

export class UserEditComponent implements OnInit {

  constructor(public authService: AuthService) {}

  ngOnInit() {
    this.authService.user.subscribe(user => {
      console.log(user);
    });
  }
}

这是 AuthService 中定义的 observable：

export class AuthService {

  public user: Observable<firebase.User>;

  constructor(public auth: AngularFireAuth) {
    this.user = auth.authState;
   }
}

这在我的 html 模板中工作得很好，每次更新用户数据时，以下列表都会正确更新：

<ul>
  <li><strong>name:</strong> {{ (authService.user | async)?.displayName }}</li>
  <li><strong>email:</strong> {{ (authService.user | async)?.email }}</li>
  <li><strong>phone:</strong> {{ (authService.user | async)?.phone }}</li>
  </ul>

我的问题是我的订阅功能只运行一次。用户对象仅在启动时记录到控制台。我尝试将代码从ngOnInit构造函数移动，但结果是一样的。每次更新用户时，我不应该将新的用户对象记录到控制台吗？

我仔细查看了问题AngularFire Observables / Subscribe - Not Setting Class Variable in Same Scope，但我看不到这如何适用于我的代码，因为我正在组件中进行订阅，而不是服务。

* 更新 *

现在我想知道这是否是某种错误，或者可能是版本问题。我用以下代码替换了AuthService代码：

export class AuthService {

  public user: Observable<any>;

  constructor(public auth: AngularFireAuth) {
    this.user = Observable.create(function (observer) {
      setInterval(() => observer.next(new Date().toString()), 1000 );
    });
  }
}

这很好用，这向我表明问题出在 firebase 提供的特定 observable 上。不过，不知道该怎么做。我能想到的一切都是hacky。

* 更新 2 *

似乎正在发生的事情是，即使next没有调用该函数，底层用户值也正在更新。我不确定这是为什么。我将我的更改ngOnInit为这样的：

export class UserEditComponent implements OnInit {

  public userCurrent: firebase.User;

  constructor(public authService: AuthService) {}

  ngOnInit() {
    obj = this;
    this.authService.user.pipe(first()).subscribe(user => {
      obj.userCurrent = user;
    });
  }
}

对象的值userCurrent保持更新。我不知道发生了什么，但它可以满足我的需要。

标签： angularfirebaserxjsfirebase-authenticationangularfire2