时间戳

首页 > 解决方案 > Angular：是否可以使 Angular 指令（例如 NgIf 和 NgFor）仅在我想要的时候检查它们绑定的变量？

javascript - Angular：是否可以使 Angular 指令（例如 NgIf 和 NgFor）仅在我想要的时候检查它们绑定的变量？

问题描述

我的问题

据我了解，Angular 指令是按照框架的 LifeCycleHook 节奏工作的。
换句话说，它们在循环中的某些时间被检查，以便每秒检查几次相关值。但是，我想知道是否可以控制这些检查。

一种情况

例如，假设我有一个 NgFor 链接到一个包含 1000 个对象的数组。
将会发生的是每个对象每秒都会被检查几次。那是每秒几千次检查。
但这对我不起作用。这比我想要的要多得多。

我感兴趣的是我的 NgFor 仅在我的页面初始化和用户的某些操作期间检查。

我的问题和我尝试过的

所以我的问题是：

是否有可能使 Angular 指令，尤其是 NgIf 和 NgFor，不再按照 LifeCycleHook 的节奏执行检查，而是仅在我想要它们时执行检查？还是我必须使用纯 HTML/CSS/Javascript 方法来做到这一点？

为了解决这个问题，我已经研究了 TrackBy。然而，这并不能改变问题的核心。
仍将执行几千次检查。除了它们将检查值而不是对象。

标签： javascripthtmlangulardom

解决方案

您是否尝试过使用 ChangeDetectionStrategy.OnPush？

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent implements OnInit {
  constructor(private changeDetector: ChangeDetectorRef) {
  }

  prop1: string;
  prop2: string;

  someMethod(): void {
    prop1 = 'abc';
    // *ngIf won't be checked yet
    prop2 = 'xyz';
    // nor here
    this.changeDetector.detectChanges();
    // now it will

  }
}

推荐阅读