Angular - 基于服务更新视图的最佳方式（性能）答案

【问题标题】：Angular - best way (for performance) to update view based on serviceAngular - 基于服务更新视图的最佳方式（性能）
【发布时间】：2020-11-30 00:41:13
【问题描述】：

我有 uiSettings 服务，它基于用户数据将控制部分模板（在不同的地方）。

目前我直接从模板使用此服务。例如：

<li *ngIf="uiService.demoButton()">
      <button [routerLink]="/demo" class="secondary">Demo</button>
</li>

服务中：

demoButton():boolean {
    return this.demoButtonAvailable;
  }

仅当用户发生某些更改（登录、注销、更新..）时才更新上述属性，但模板每隔一秒左右调用一次 uiService.demoButton()。

我相信有更好的方法（性能）来做到这一点。如果我使用 observable，我会观察这个值，还是等待所需变量更新后触发的事件？

【问题讨论】：

【解决方案1】：

ngIf 条件在每次更改检测时运行，您需要用一些条件变量包装它。例如

<li *ngIf="demoButtonAvailable">
      <button (click)="uiService.demoButton()" class="secondary">Demo</button>
</li>

【讨论】：

【解决方案2】：

您可以使用BehaviorSubject 和async 管道在发生变化时进行通知。然后您可以使用changeDetectionStrategy: ChangeDetection.onPush 或分离changeDetectorRef 并手动检测更改。

【讨论】：

感谢您为我指明了正确的方向。我只需要阅读有关此 BehaviorSubjects 的更多信息。一个问题。如果仅在检测到服务更改时更新负责该 ngIf 内部组件的属性，但仍在该模板中使用 ngIf，我会获得任何性能吗？（ngIf 从自组件而不是服务检查属性）？
我不确定，但据我所知，Angular 在每个事件或某些属性更改时运行更改检测。首先，您不应该在*ngIf 中使用方法（特别是需要很长时间才能完成的方法）——最好只使用变量。其次，当财产属于服务时，不应有太大的性能差异。但是，您应该在模板中使用属于您的组件的变量，因此使用BehaviorSubject 将该数据存储在您的服务中会是更好的选择（当值更改时，每个订阅者都会收到通知）。为什么要优化得这么厉害？

【解决方案3】：

您可以简单地使用服务变量demoButtonAvailable，如下所示，

...

<li *ngIf="uiService.demoButtonAvailable">
      <button [routerLink]="/demo" class="secondary">Demo</button>
</li>

...

如果我使用 observable，我会观察这个值，还是等待所需变量更新后触发的事件？

对于简单的布尔值，您不需要将 Observable 与 event 一起使用。是的，它每次都会触发，因为它是method call in the view（不推荐），但是您可以使用服务布尔变量，除非您想要另一个包含服务数据的组件变量。

【讨论】：