服务发生变化时的Angular Lifecycle钩子

Posted 2023-03-13

【中文标题】服务发生变化时的Angular Lifecycle钩子

【英文标题】：Angular Lifecycle hook when there is a change on service

【发布时间】：2022-01-15 20:08:44

【问题描述】：

我有一项服务 - 让我们调用 ServiceA，

它会进行多次 HTTP 调用，我想在计算完所有内容后检索信息。为此，我有一个布尔变量 - isEverythingProcessed，当这种情况发生时。

在我的组件上 - 让我们调用 ComponentB，

我在做：

ngOnCheck()
    
    if(this.serviceA.isEverythingProcessed)
    
    //dostuff
    
    

这可行，但它被调用了数百次。有任何替代方法，我的意思是在组件上实现一个生命周期，检测服务的变量何时被更改？

【参考方案1】：

您可以使用 rxjs 创建一个即将更新的 onInit 值的 observable，并订阅更改。这就是我看到它完成的方式。虽然，如果某些东西有效并且没有严重的性能影响（使用单个 if 语句进行优化的 fn 调用，即使它被调用了几百次也不是那么糟糕，尽管并不理想）我不会过度设计它。

【讨论】：

我强烈推荐你学习 BehaviourSubject。

【参考方案2】：

Subject 在这里可能就足够了，因为您的组件正在监听更改。例如，当有侦听器时，BehaviorSubject 总是会发出，但您可能只想在它发出时收听，确切地说是在它发出时。因此，在服务中创建一个主题而不是布尔变量，在组件中订阅它，并在主题发出时发挥你的作用。组件销毁时记得取消订阅！

所以我建议如下

服务：

isEverythingProcessed = new Subject<boolean>();

当你所有的计算完成后，拨打next()就可以了：

this.isEverythingProcessed.next(true)

和组件：

this.service.isEverythingProcessed.subscribe((bool: boolean) => 
  // do stuff!
)

STACKBLITZ DEMO

如果您需要一个初始值并始终触发，我建议使用BehaviorSubject 而不是Subject。