组件 ngOnInit 中的 Angular 订阅

Posted 2023-02-22

【中文标题】组件 ngOnInit 中的 Angular 订阅

【英文标题】：Angular Subscription in component ngOnInit

【发布时间】：2019-01-25 22:52:40

【问题描述】：

我正在学习 Angular 5+，最近来到主题/订阅部分，我看到很多教程想以某种方式使用订阅：

在组件中声明订阅 通过服务的主题或 ngrx/store 在 ngOnInit 中订阅它 在 ngOnDestroy 中取消订阅

但是，我不确定我们是否必须订阅/取消订阅 ngOnInit 和 ngOnDestroy 组件中的每个订阅。例如，如果我的订阅将通过按钮单击事件进行更新，我应该在我的组件中订阅哪个计划？

仅 ngOnInit 仅按钮点击事件 ngOnInit 和按钮点击事件

为什么我们总是在 ngOnInit 中订阅订阅？ ngOnInit 就像页面生命周期中的 Page_Load，所以它只会在第一次调用一次，如果订阅时调用更新了，ngOnInit 会被一遍又一遍地触发吗？如果是这样，我的组件是否会反复加载，如果在大型应用程序中会导致性能问题？

【参考方案1】：

您通常将 Observables 放入 Service 中进行订阅，并通过 getter 和 setter 使它们可用。

订阅 Observable 时，它​​的行为方式类似于 EventListener。每当 Observable 中的对象发生变化时，就会触发一个事件，并且执行订阅中的代码。此外，您还会获得更新后的对象。

即使您在 ngOnInit 中初始化订阅，这也不会导致您的整个组件在更新到达时重新加载。只有那些在订阅中由您的代码更新的部分。

您不必在 ngOnInit() 中添加订阅。这取决于你想在组件中实现什么。但大多数情况下，您希望在访问组件时直接加载和显示数据，并在此数据更改时更新 UI。这就是为什么最好将订阅放在 ngOnInit() 中的原因。