2

我正在开发一个 Angular 5.2 应用程序。我的基本组件中有 10 个选项卡。每个选项卡都有自己的组件（ 4 个组件）。所以我的每个标签都有一个非常繁重的处理。现在，我的问题是，如果我更新任何选项卡的子组件，那么在所有选项卡及其子组件上运行 changeDetection，这会使我的应用程序非常慢。

有没有办法告诉角度在页面的特定部分运行更改检测？我知道这听起来有点奇怪，但我需要提高应用程序性能和真正的问题，我看到的是，Change-Detection 正在为整个页面运行（10 个选项卡，每个选项卡有 4 个组件）。

到目前为止，我没有发布任何代码，因为这个问题是一个通用问题，但如果有人认为该代码会有所帮助，我也可以这样做。

4

2 回答 2

0

您可以使用 ngDoCheck 生命周期挂钩来检查对象突变并使用 markForCheck 方法通知 Angular。 

export class AComponent {
  @Input() o;  constructor(private cd: ChangeDetectorRef) {}

  ngOnChanges() {
    // every time the object changes 
    // store the new `id`
    this.id = this.o.id;
  }

  ngDoCheck() {
    // check for object mutation
    if (this.id !== this.o.id) {
      this.cd.markForCheck();
    }
  }
}
于 2018-10-08T20:12:29.383 回答
0

您可以使用ChangeDetectionStrategy.OnPush

import {..., ChangeDetectionStrategy } from '@angular/core';

@Component({
  ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
  @Input() data;
}

手动标记以进行更改检测。

import {..., ChangeDetectorRef } from '@angular/core';

export class CounterComponent {
    constructor(private cd: ChangeDetectorRef) {}
  ...
  ngOnInit() {
    this.data.subscribe((value) => {
      this._data = value;
      // tell CD to verify this subtree
      this.cd.markForCheck();
    });
  }
}

请参阅文档以获取信息：https ://angular.io/api/core/ChangeDetectorRef

于 2018-10-08T18:54:47.877 回答