Angular 生命周期 onInit 和 onChanges 與訂閱

Question

我正在從父級向下傳遞一些 @Input 道具，每當我的道具更新時，我都希望我的組件更新。

我正在做的是：

@Input() variable;
@Input() variable2;

public deets;

constructor() { 
  this.details$ = this._sore.select("details") 
}

ngOnInit() { }

ngOnChanges(changes: SimpleChanges) {
  if (
    changes.variable && changes.variable.currentValue ||
    changes.variable2 && changes.variable2.currentValue
  ) {
    this.apiCall();
    this.subscribeMethod();
  }
}

ngOnDestroy() {
  this.deets.unsubscribe();
}

subscribeMethod() {
  this.deets = this.details$.subscribe(value => {
    if (value) // this.action1()
  }
}

apiCall() {
  this._store.dispatch(new LoadDetailsAction);
}

action1() { console.log("test") }

但是我注意到，當我從父級更改我的 Input 道具並更新時，我正在撥打我的 API 一次（好），但看起來我又在訂閱了？ 所以我有某種 memory 泄漏。

如果在我的 this.action1() 中我創建了一個控制台日志，第一次，它將記錄一次。 然后，如果我再次更新我的變量或 variable2，它會控制台記錄兩次。 然后三次。 等等

是因為我的訂閱沒有被刪除嗎？ 所以它在多個訂閱中調用 action1？

我以為我的 ngOnDestroy() 會解決這個問題，但我想因為組件實際上並沒有被銷毀而是更新了，所以它並沒有處理它。

那么我會把我的 subscribeMethod 移到 onInit 嗎？ 進入我的構造函數？ 我如何避免這些多余的動作？

謝謝！

編輯 我嘗試將我的 subscribeMethod 移動到我的 ngOnInit，它似乎解決了問題，但它給了我兩次控制台日志。 一次使用舊的訂閱數據，一次使用新的:(

Answer 1

第一件事。 Angular 將在您的輸入之一發生更改時自動調用ngOnChanges ，因此您可以刪除圍繞simpleChanges的所有代碼。 一般來說，如果你有一些關於特定輸入的條件邏輯，你會使用這樣的代碼。 在您的情況下，如果任何輸入發生變化，您的條件為真，因此您可以完全刪除該邏輯。

其次，您在ngOnInit中設置訂閱的想法是正確的。 你可以有這樣的東西：

this.deets = this._store.select("details").subscribe(value => {
    if (value) // this.action1()
}

我不確定你的編輯是什么意思。 根據定義，如果您的可觀察值發生變化，您期望調用訂閱。 也許你可以澄清一下，我會編輯我的回復。