Angular-基于服务更新视图的最佳方式(为了提高性能)

Question

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

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

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

在役：

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

上面的属性只有在用户发生变化时才会更新(登录、注销、更新..(，但模板每隔一秒左右就会调用uiService.demoButton((。

我相信有更好的方法(为了表现(。如果我使用observable，我会观察这个值，还是等待所需变量更新后触发事件？

Answer 1

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

Answer 2

ng如果条件在每次更改检测中都运行，则需要用一些条件变量包装它。例如

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

Answer 3

您只需像下面这样使用服务变量demoButtonAvailable，

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

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

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