随着子组件的增多和嵌套，遇到数据扭转，然而组件页面没有渲染的问题开始变多。

例如:
此页面为子组件，关上该页面后，本来应该显示已存在的附件，然而当初却显示空。
正确显示：

问题显示：没有渲染

此问题的呈现往往是因为变更检测器没有检测到组件的数据变更，没有进行变更检测。

到底为什么没有检测到，探索了一段时间也没有探究出产生问题根本原因是什么。

但往往能够过手动变更检测来解决，如下述代码的第9行，调用ChangeDetectorRef的detectChanges函数。明天就来讲一讲对于ChangeDetectorRef的相干常识。

1 constructor(private attachmentService: AttachmentService,2              private ref: ChangeDetectorRef) {3  }4 getAttachmentByIds() {5 this.attachmentService.getAttachmentByIds(this.attachmentIds)6      .subscribe(attachments => {7        this.attachments = attachments;8        // 进行强制变更检测 避免页面不显示attachments的变更9        this.ref.detectChanges();10      })11  }

变更检测

先来说说angular变更检测的两种策略。

  • Default
  • OnPush

Default策略

Angular的组件能够依赖其余的组件来构建应用程序的页面逻辑，最初造成一棵组件树。每个组件都有本人的变更检测器（change detector）。因而，变更检测器的构造也是一棵同构的树


当某个组件的状态产生扭转时，Angular会从这棵树的根节点开始遍历，登程所有组件节点的变更检测器，这样Angular就晓得那些组件的状态产生了扭转，须要更新相应的UI。

这个过程看似开销很大，但Angular曾经进行了大量优化，理论变更检测的速度很快。 这种策略在咱们利用组件过多时会对咱们的利用产生性能的影响, 不过在不相熟相干细节的状况下，Default策略是咱们最好的抉择。

OnPush策略

OnPush策略我目前没有尝试用过，但能够作为理解。

Angular 还提供了一种 OnPush 策略，咱们可以批改组件装璜器的 changeDetection 属性来更改变化检测的策略。 如下述代码的第4行。

1 @Component({2    selector: 'app-A',3    // 设置变化检测的策略4    changeDetection: ChangeDetectionStrategy.OnPush,5    template: ...6 })7 export class AComponent {8    ...9 }

在OnPush策略下，只有这几种状况能够触发以后组件的变更检测：

  • 组件的输出属性（绑定）的援用被扭转
  • 组件外部触发了异步事件
  • 手动触发变更检测
  • 以后组件或子组件之一触发了事件, 如click

简略谈谈第一点，这是angular中比拟经典的解决办法。其余的都比拟直观。

例如父组件向子组件应用@Input传入一个对象

@Component({template: `<child [people]="people"></child>`})export class AppComponent  {people = {name: '张三'};onClick1() {this.people.name = '李四';}onClick2() {this.people = { name: '李四'};}}

父组件调用onClick1函数并不会触发变更检测，因为这仅仅是扭转了对象的属性，并没有扭转对象的援用。

而onClick2函数才会触发变更检测。

咱们能够通过以下的图察看onPush策略下的行为。

当默认变更检测进行时，变更检测器并没有去更新onPush策略那一边的子树。在咱们对组件的变更检测非常理解的状况下，应用这种行为能够缩小不必要的变更检测从而进步性能。

总结：
为了自动检测变动，Angular 默认应用 ChangeDetectionStrategy.Default 策略，可确保咱们的 UI 以可预测和高性能的形式显示，在变更组件不超过50个时，实用于大多数应用程序
对于较大的应用程序，能够思考应用 ChangeDetectionStrategy.OnPush策略。

ChangeDetectorRef

接下来说说手动变更检测。

手动变更检测应用到了angular给咱们提供的ChangeDetectorRef类，定义了以下几种公共接口。

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

假如咱们有如下组件树

detach()

容许咱们操作状态的第一个办法是detach，它只是单纯禁用对以后视图的检测。

应用办法也很简略。

export class AComponent {    constructor(public cd: ChangeDetectorRef) {      this.cd.detach();  }

这确保了在运行以下更改检测时，AppComponent将跳过以 结尾的左分支（不会查看背景为黄色的组件）。

同时如果AComponent的状态产生了扭转，它的子组件也不会进行查看。

reattach

将先前拆散的视图从新附加到更改检测树。

例如咱们应用reattach()办法，就能够将下面应用detach（）禁用的视图从新增加进来。

例如：

@Input()  set live(value: boolean) {    if (value) {      this.ref.reattach();    } else {      this.ref.detach();    }  }

markForCheck

该办法实用于应用OnPush策略的时候。

当视图应用OnPush (checkOnce) 更改检测策略时，显式将视图标记为脏，以便再次对其进行查看。

从搜寻到的材料来看，它只是向上迭代并启用对每个父组件直至根的查看。

detectChanges

对以后组件及其所有子组件运行一次更改检测, 也是咱们最罕用的。

checkNoChanges

可确保在以后的变更检测运行中不会产生任何更改。如果发现更改的绑定或确定应该更新 DOM，则抛出异样。

组合操作

比方组件的数据预计会一直变动，每秒屡次。为了进步性能，咱们心愿检查和更新列表的频率低于理论产生更改的频率。为此，咱们能够拆散组件的更改检测器并每五秒执行一次查看。

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

总结： 了解ChangeDetectorRef类，能够很好地帮忙咱们对变更检测的原理和行为，当默认变更检测满足不了咱们的想法时，能够让咱们手动地去调整视图的更新。