angular - 仅运行一次 Angular 更改检测并停止检测该组件的更改

Question

我只需要在加载组件或路由发生变化时检测一次 Angular 变化，然后我想停止检测变化。

实际上我需要根据用户 Angular 色显示和隐藏功能。所以我有很多 *ngIf在单个 html 模板中，但我需要检查 *ngIf第一次加载模板时仅条件一次，之后停止检测更改，因为它会影响性能。

我希望页面在单次更改检测后像静态一样。

例如 :

       <li *ngIf="doesHavePermission('templateName')">
       </li>

应该检查一次，但我看到的是它正在多次检查单个 *ngIf 的更改。我有很多 *ngIf像这样:

我找到了 markForCheck() 和 detach()在这个 Angular 文档中 https://angular.io/api/core/ChangeDetectorRef .

But what they are doing is that they are either allowing all change detection or none at all,

而且我只需要检测一次更改并在此之后停止。

我们可以在 Angular 上进行单次时间变化检测吗？

或者有更好的方法来处理场景吗？

Answer 1

当您在 *ngIf 内部使用函数调用时然后每次发生更改检测时 angular 都会调用此函数。这个 changeDetection 是在你的组件外部还是内部触发都没有关系，但是 angular 在调用这个函数之前无法知道函数的返回值是否已经改变。

所以在*ngIf内部使用函数调用不是一个好方法一般来说。

备择方案:

在组件中使用普通属性:

instead of 
<div *ngIf="checkCondition()"></div>

use this

<div *ngIf="condition"></div>

@Component(...)
class MyComponent {
 condition= false;

 checkCondition() {
  if(something) {
   this.condition = true;
  }
 }
}

使用这种方法，您可以在条件发生变化时更好地处理并手动调用该函数。除了使用属性，您还可以使用 map :

@Component(...) 
class MyComponent{
  conditions: { [key: string]: boolean }

  ngOnInit() {
   condition = {
    template1: true,
    template2: false
   }
  }
}

<div *ngIf="conditions['template1']"></div>

结合 ChangeDetectionStrategy.OnPush您可以将更改检测最小化为 onPush仅在输入参数更改时触发更改检测。这基本上意味着来自父项的更改检测不会触发子项的更改检测。

如果你结合这两种方法，你应该得到最小的变化检测:

@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush
}) 
    class MyComponent{
      @Input() conditions: { [key: string]: boolean }
}

这是一篇很好的文章供进一步阅读: https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496