我什么时候应该在 angular 模板参数中使用可观察订阅而不是常规变量？

Question

我会给你一个简单的例子来解释我在做什么。我需要将一个布尔值“chartReady”传递给我的子组件，这个变量是在一个方法中设置的，该方法在我的组件的不同方法中被调用。我试图了解执行此操作的最佳性能方式是什么。

第一个选项：在组件内部使用常规变量并将其作为常规参数传递。

分量：

setChartReady() {
    this.chartReady = false;
    setTimeout(() => {
        this.chartReady = true; //wait for chart to be completed
    }, 4000);
}

模板：

<details-chart
    [chartReady]="chartReady">
</details-chart>

第二个选项：在我的组件中使用可观察对象（在本例中为 BehaviorSubject）并将其订阅传递给模板。

setChartReady() {
    this.chartReady$.next(false);
    setTimeout(() => {
        this.chartReady$.next(true); //wait for chart to be completed
    }, 4000);
}
______________________________________________________________
<details-chart
    [chartReady]="chartReady$ | async">
</details-chart>

这两种方法有什么区别吗？我知道一个事实，如果我有类似于选项 1 的东西，但我没有直接传递变量，而是做了类似的事情：

returnChartReady() {
    console.log("Is this repeating?")
    return this.chartReady;
}
______________________________________________________________
<details-chart
    [chartReady]="returnChartReady()">
</details-chart>

Angular 会继续尝试为我与页面进行的每个小交互调用 returnChartReady 方法，我用多次调用的 console.log 检查了它.事实上，即使我将方法更改为 return 一个可观察对象并像下一个示例那样订阅它，该方法仍然会被多次调用。

returnChartReady$(): Observable<boolean> {
   console.log("Is this repeating?")
    return this.chartReady$;
}
______________________________________________________________
<details-chart
    [chartReady]="returnChartReady$() | async">
</details-chart>

我的问题是：当我使用 return 使用 returnChartReady 编辑它时，是否会 angular 在使用常规变量方法时继续尝试疯狂地更新我的变量方法？那么可观察的方法呢，它会阻止重复的更新检查吗？最后，如果 observable 方法确实有效，为什么在我最后一个例子中出现同样的问题，我清楚地订阅了该方法？ angular 处理传递给模板参数的方法与传递给模板参数的变量是否不同？

提前致谢。

Answer 1

控制台日志重复出现的原因是 Angular 的默认更改检测系统。这就是为什么您可以在组件中使用属性或方法来指示加载事件的原因。

如果您利用可观察对象来处理异步事件，那么您可以将组件的变更检测策略更新为更优化的策略。（参见 https://angular.io/api/core/ChangeDetectionStrategy）

如果您的应用很小，那么性能提升可以忽略不计。但是，如果您正在处理更大或数据更密集的应用程序，那么您可能希望让您的组件利用可观察对象和 OnPush 变更检测策略。

我什么时候应该在 angular 模板参数中使用可观察订阅而不是常规变量？

When should I use observable subscriptions instead of regular variables in an angular template parameter?

angular

typescript

rxjs

reactive-programming