Angular - 為什么每次發出新值時都會調用 ngOnInit？

Question

我的服務中有一個名為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 ？

Answer 1

在 onInit 中，您訂閱了您的主題，因此每次發出新值時，都會運行方法“this.getAllUsers()”。 您是否訂閱了 OnInit 並不重要。 訂閱一直有效，直到您取消訂閱。

Answer 2

訂閱將在每次發出事件時觸發，無論它位於何處。 因此，您的 ngOnIt不會在每次觸發事件時觸發，而是“訂閱”，但由於您的訂閱在“ngOnInIt”內，因此看起來像是“ngOnInIt”被觸發。 如果你不想要這個，你可以將你的訂閱移出 ngOnInIt 之外，盡管它不會產生問題。 因為您在 ngOnInIt 中編寫的其他邏輯不會被觸發。

如果您想自己檢查，您可以在 ngOnInit 中但在訂閱之外添加一個 console.log("testing") 。 並發出多個事件，我們會注意到“測試”只會記錄一次（當組件加載時）

Answer 3

這不是......每次發出值時都會調用訂閱回調，即這部分：

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

但是您並不是在每次發出值時都進行新的訂閱。

這就是 observables 的工作原理