Angular - 为什么每次我发出新值时都会调用 ngOnInit？答案

【问题标题】：Angular - Why ngOnInit is called every time i emit a new value?Angular - 为什么每次我发出新值时都会调用 ngOnInit？
【发布时间】：2020-06-13 07:23:26
【问题描述】：

我的服务中有一个名为 refreshSubject$ 的主题。

  private refreshUsers$ = new Subject<User[]>();

每次添加用户时，他都会发出一个新值。

  saveUser(user: User[]) {
    return this.http.post<User>(this.url, user)
      .pipe(
        tap(() => {
          this.refreshUsers$.next();
        })
      );
  }

我在我的服务上使用 get 方法来检索值

  get refresh$() {
    return this.refreshUsers$;
  }

现在每次添加新用户时，我都会使用 next() 方法发出一个新值。

  this.refreshUsers$.next();

在我的组件中，我有我的生命周期钩子 ngOnInit，每次 refreshUsers$ 主题发出新值时都会调用它。

  ngOnInit(): void {
    this.apiService.refresh$.subscribe(() => {
      this.getAllUsers();
    });
  }

为什么每次订阅新值时都会调用 ngOnInit ？

【问题讨论】：

标签： angular typescript rxjs angular2-observables subject-observer

【解决方案1】：

订阅将在每次发出事件时触发，无论它位于何处。因此，您的 ngOnIt 不会在每次触发事件时都被触发，但它是“订阅”，但由于您的订阅位于“ngOnInIt”内部，因此看起来“ngOnInIt”正在被触发。如果您不想要这个，您可以将您的订阅移出 ngOnInIt，尽管它不会产生问题。因为您在 ngOnInIt 中编写的其他逻辑不会被触发。

如果你想自己检查，你可以在你的 ngOnInit 中添加一个 console.log("testing") ，但在订阅之外。并发出多个事件，我们会注意到“测试”只会记录一次（当组件加载时）

【讨论】：

【解决方案2】：

在 onInit 中，您订阅了您的主题，因此每次您发出新值时，都会运行方法“this.getAllUsers()”。您是否订阅了 OnInit 并不重要。在您取消订阅之前，订阅一直有效。

【讨论】：

好的，PauHo，我明白了。非常感谢！

【解决方案3】：

不是...每次发出值时都会调用订阅回调，即这部分：

() => {
      this.getAllUsers();
}

但您并不是每次发出值时都进行新订阅。

这就是可观察对象的工作方式

【讨论】：

感谢 Jlc 的回答，我试图了解我所做的事情。感谢您的帮助。