吸气剂是个坏主意吗？

Question

在Angular中，有时在使用*ngIf时，必须检查一堆条件是否渲染元素。有时，它变得有点难以阅读。在这种情况下使用吸气剂方法不是一个好主意吗？为什么或者为什么不？ 应该完全避免它们吗？

为了提高可读性，我曾尝试将条件存储在变量中，但是遇到了问题（我正在检查类的属性的值），我不确定，但是我认为这与过时的数据有关，他们没有返回正确的结果，但是当我使用getter时，DOM会在发生变化时进行更新，基本上我会得到正确的结果。

类似的东西：

在视图中：

<div [ngClass]="{ 'hidden' : isFlagUnchecked}"></div>

在组件类中：

get isFlagUnchecked(): boolean { return !this.profileForm.get('flag').value; }

或： （分组条件的示例，基本上是在寻找方法，以便可以进一步简化或使用更具描述性的名称进行封装，例如存储在单个变量中，或者应该是）

<div *ngIf="!data['content_id'] || !data['content_name']" class="container"></div>

Answer 1

将您的吸气剂属性更改为

get isFlagUnchecked(): boolean { console.log('Checking flag'); return !this.profileForm.get('flag').value; }

并查看该吸气剂被击中的频率。

这完全取决于您的页面在做什么以及触发更改检测的频率。

在profileForm的标志输入上拥有一个使用change事件处理程序进行更新的布尔属性，总是会获得更好的性能。像

<input name="flag" (change)="updateIsFlagUnchecked()">

这样，逻辑仅在更改表单字段时运行，而不是在更改检测时不断运行。