Question

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

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

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

Answer 1

您可以使用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

Answer 2

您可以使用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();
    }
  }
}

角度变化检测仅更新部分页面

2 个答案: