ChangeDetectorRef

class ChangeDetectorRef {
  markForCheck(): void
  detach(): void
  detectChanges(): void
  checkNoChanges(): void
  reattach(): void
}

方法

• markForCheck(): void

Marks all ChangeDetectionStrategy ancestors as to be checked.
标记所有ChangeDetectionStrategy祖先进行检查。

举例

@Component({
  selector: 'cmp',changeDetection: ChangeDetectionStrategy.OnPush,template: `Number of ticks: {{numberOfTicks}}`
})
class Cmp {
  numberOfTicks = 0;

  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => { this.numberOfTicks ++ // the following is required,otherwise the view will not be updated this.ref.markForCheck(); },1000); } } @Component({ selector: 'app',changeDetection: ChangeDetectionStrategy.OnPush,template: ` <cmp><cmp> `,}) class App { }

• detach(): void

Detaches the change detector from the change detector tree.
从变化检测器树中分离出变化检测器

The detached change detector will not be checked until it is reattached.
分离的变化检测器在重新连接之前不会被检查。

This can also be used in combination with ChangeDetectorRef to implement local change detection checks.
这也可以与ChangeDetectorRef结合使用来实现本地更改检测检查。

举例

以下示例定义具有大量只读数据列表的组件。想象一下，数据不断变化，每秒钟多次。出于性能原因，我们希望每隔五秒检查一次列表。我们可以通过拆卸组件的变化检测器并每五秒进行一次本地检查

class DataProvider {
  // 在实际应用中，每次返回的数据将不同
  get data() {
    return [1,2,3,4,5];
  }
}

@Component({
  selector: 'giant-list',template: ` <li *ngFor="let d of dataProvider.data">Data {{d}}</lig> `,})
class GiantList {
  constructor(private ref: ChangeDetectorRef,private dataProvider:DataProvider) {
    ref.detach();
    setInterval(() => { this.ref.detectChanges(); },5000); } } @Component({ selector: 'app',providers: [DataProvider],template: ` <giant-list><giant-list> `,}) class App { }

• detectChanges(): void

Checks the change detector and its children.
检查变化探测器及其子项。

This can also be used in combination with ChangeDetectorRef to implement local change detection checks.
这也可以与ChangeDetectorRef结合使用来实现本地更改检测检查。

• checkNoChanges(): void

Checks the change detector and its children,and throws if any changes are detected.
检查变化检测器及其子项，如果检测到任何变化，则抛出

This is used in development mode to verify that running change detection doesn’t introduce other changes.
这在开发模式下用于验证运行更改检测不会引入其他更改。

• reattach(): void

Reattach the change detector to the change detector tree.
将更改检测器重新连接到变更检测器树。

This also marks OnPush ancestors as to be checked. This reattached change detector will be checked during the next change detection run.
这也标志着OnPush祖先被检查。在下次更改检测运行期间，将检查此重新连接的更改检测器。

例子

The following example creates a component displaying live data. The component will detach its change detector from the main change detector tree when the component’s live property is set to false.
以下示例创建一个显示实时数据的组件。当组件的实时属性设置为false时，组件将从主变化检测器树中将其变化检测器分离。

class DataProvider {
  data = 1;

  constructor() {
    setInterval(() => { this.data = this.data * 2; },500); } } @Component({ selector: 'live-data',inputs: ['live'],template: 'Data: {{dataProvider.data}}' }) class LiveData { constructor(private ref: ChangeDetectorRef,private dataProvider:DataProvider) {} set live(value) { if (value) this.ref.reattach(); else this.ref.detach(); } } @Component({ selector: 'app',template: ` Live Update: <input type="checkbox" [(ngModel)]="live"> <live-data [live]="live"><live-data> `,}) class App { live = true; }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!