带有订阅的 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 调用（很好），但看起来我又在订阅了？所以我有某种内存泄漏。

如果在我的 this.action1() 中创建控制台日志，第一次，它将记录一次。然后，如果我再次更新我的变量或变量 2，它会控制台记录两次。然后三次。等等

是因为我的订阅没有被删除吗？所以它在多个订阅中调用 action1？

我以为我的 ngOnDestroy() 会解决这个问题，但我猜因为组件实际上并没有被销毁而是更新，所以它没有解决它。

那么我会将我的 subscribeMethod 移动到 onInit 吗？进入我的构造函数？如何避免这些过度操作？

谢谢！

编辑我尝试将我的 subscribeMethod 移动到我的 ngOnInit ，它似乎解决了问题，但它给了我两次控制台日志。一次使用旧订阅数据，一次使用新订阅数据:(

Answer 1

第一件事。 Angular 将在您的任何输入更改时自动调用ngOnChanges，因此您可以删除所有围绕simpleChanges 旋转的代码。一般来说，如果你有一些关于特定输入的条件逻辑，你会使用这样的代码。在您的情况下，如果 any 输入发生更改，则您的条件为真，因此您可以完全删除该逻辑。

其次，您在ngOnInit 中设置订阅的想法是正确的。你可以有这样的东西：

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

我不确定您的编辑是什么意思。根据定义，如果您的 observable 的值发生变化，您希望调用 subscribe。也许你可以澄清一下，我会编辑我的回复。