时间戳

首页 > 解决方案 > 如何避免使用视图中的方法触发组件中的更改检测？

angular - 如何避免使用视图中的方法触发组件中的更改检测？

问题描述

我有一个带过滤器的数组：

["BOX_NAMES", "BATHROOMS", "CONFERENCE_HALLS"]

当过滤器在指令中处于活动状态时，我会显示部分视图*ngIf*：

*ngIf="isFilterActive(Filters.CONFERENCE_HALLS)"

isFilterActive功能实现：

if (this.officeService.selectedFilter[0] === Filters.SHOW_ALL) {
    return true;
  }
  return this.officeService.selectedFilter.includes(filter);
}

当我更改过滤器时，我的视图会重新渲染很多次。如何避免这种情况？

当然，我的组件是在延迟加载中加载的。

标签： angularlazy-loadingangular-directiveangular-ng-ifangular-changedetection

解决方案

首先：为什么你的组件渲染很多次是个问题？您不应该有任何性能问题，因为*ngIf它是为这些操作而设计的。

你的组件之所以如此频繁地呈现，是因为ChangeDetection每当你的组件发生变化时，Angular 就会触发。然后，检查视图中的所有变量、指令是否有变化。

为了避免这种情况，您可以做的是通过添加另一个 changeDetectionStrategy 来防止在组件装饰器中这样做：

@Component({
    // ...other ocmponent decorator properties
    changeDetection: ChangeDetectionStrategy.OnPush
})

@Input()现在，您的组件仅在您的参数更改或您明确告知它时才会触发 changeDetection 。因此，现在，每当您更改过滤器（或在组件中执行未通过@Input()参数触发的其他操作时，您都需要手动触发 changeDetection。

因此，首先在构造函数中通过 DependencyInjection 注入它：

constructor(private cd: ChangeDetectorRef) {}

然后，在执行更改后调用它：

this.cd.detectChanges();

希望有帮助。

推荐阅读