Angular 无论设置如何，单击事件时都会出现更改检测

这可能是我自己对Angular 2 change detection的工作原理的误解，但我本以为如果组件的

ChangeDetectionStrategy

设置为

CheckOnce

，

CheckOnce

或

Distached

，则该组件在实例化组件时只会检查一次更改。这似乎不是那样发生的

import {Component, OnInit, ChangeDetectionStrategy} from 'angular2/core'

@Component({
  selector: 'my-app',
  providers: [],
  template: `
    <div>
      <button 
        (click)="onClick($event)" 
        [class.thing]="hasThingClass()">Update</button>
    </div>
  `,
  changeDetection:ChangeDetectionStrategy.CheckOnce,
  styles: [`
    .thing { background-color: red }
  `]
})

export class App implements OnInit {

  public hasThing:Boolean = false;

  onClick() {
    this.hasThing = !this.hasThing;
  }

  hasThingClass(e) {
    return this.hasThing;
  }

}

从'angular2/core'导入{Component，OnInit，changedtectionstrategy}
@组成部分({
选择器：“我的应用程序”，
提供者：[]，
模板：`
使现代化
`,
changeDetection:ChangeDetectionStrategy.CheckOnce，
风格：[`
.东西{背景色：红色}
`]
})
导出类应用程序实现OnInit{
public hasshing:Boolean=false；
onClick（）{
this.hasshing=！this.hasshing；
}
hasThingClass（e）{
归还这个东西；
}
}

单击时，我希望切换

hasshing

属性，但我不希望视图更新。碰巧，视图会更新。当

ChangeDetectionStrategy

也设置为

Distached

时，会发生此错误

---

我错过了什么？到底是什么导致视图更新？从我所看到的情况来看，无论我如何更新

hasshing

属性，无论值是否更改，视图都会在单击时更新。

我希望这有助于您理解它：）

假设我们在服务中模拟了一个异步事件：

import { Injectable } from 'angular2/core';

@Injectable()
export class DataProvider {
  data = 1;
  constructor() {
    // async data change simulation
    setInterval(() => {
      this.data = this.data * 2;
    }, 500);
  }
}

当angular通过zones api发现任何异步事件更改时，zone通知angular在该上下文中发生异步事件，并将其传播到angular change detection api，以在实际视图和组件之间进行检查。在下面的示例中，我们可以看到，由于更改检测行为未更改，angular不断更新视图：

import {
  Component
} from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { DataProvider } from './data-provider';
import { TriggerDataChange } from './data-change-trigger';

@Component({
  selector: 'app',
  template: `
    <div>Live Update: {{dataProvider.data}} </div>
    <data-change-trigger></data-change-trigger>
  `,
  providers: [DataProvider],
  directives: [TriggerDataChange]
})
class App {
  constructor(private dataProvider:DataProvider) {}
}

bootstrap(App);

---

这是一个本机事件，正在触发当前组件ChangeDetectorRef.detectChanges（）

我希望这有助于您理解它：）

假设我们在服务中模拟了一个异步事件：

import { Injectable } from 'angular2/core';

@Injectable()
export class DataProvider {
  data = 1;
  constructor() {
    // async data change simulation
    setInterval(() => {
      this.data = this.data * 2;
    }, 500);
  }
}

当angular通过zones api发现任何异步事件更改时，zone通知angular在该上下文中发生异步事件，并将其传播到angular change detection api，以在实际视图和组件之间进行检查。在下面的示例中，我们可以看到，由于更改检测行为未更改，angular不断更新视图：

import {
  Component
} from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { DataProvider } from './data-provider';
import { TriggerDataChange } from './data-change-trigger';

@Component({
  selector: 'app',
  template: `
    <div>Live Update: {{dataProvider.data}} </div>
    <data-change-trigger></data-change-trigger>
  `,
  providers: [DataProvider],
  directives: [TriggerDataChange]
})
class App {
  constructor(private dataProvider:DataProvider) {}
}

bootstrap(App);

---

这是一个触发当前组件ChangeDetectorRef.detectChanges（）

的本机事件，无论ChangeDetectionStrategy设置如何，Angular都会随时检查组件的更改

• 组件触发一个事件
• 可观察对象触发事件，异步管道在视图中与该可观察对象一起使用

---

这个想法是。。。如果组件触发了事件，或绑定的可观察值发生了更改，则很可能您希望更新其视图。

无论ChangeDetectionStrategy设置如何，Angular都会随时检查组件的更改

• 组件触发一个事件
• 可观察对象触发事件，异步管道在视图中与该可观察对象一起使用

---

这个想法是。。。如果组件触发了一个事件，或者绑定的可观察值发生了更改，则很可能您希望更新其视图。

这并不能真正解决问题。在问题中，视图正在更新而未调用detectChanges（），提问者想知道原因。@MarkRajcok angular始终在内部调用detectChanges来执行视图和组件之间的更改检测。我将重试。。。在代码中，您手动调用detectChanges（）以强制更新视图。在@garethdn的plunker中，视图正在更新，而无需手动调用detectChanges（）。这就是为什么我认为你的例子没有真正解决OP的问题。此外，您不需要在示例中调用

detectChanges（）

，就可以更新视图。试试看。。。注释掉那行代码。只需点击事件火将更新您的视图。这就是OP想要理解的。@MarkRajcok您在一个案例中是对的，我不需要手动执行，因为事件绑定正在调用这个。ref.detectChanges（）MarkRajcok，但在本例中，我向他展示了如何使用ChangeDetectionStrategy.CheckOnce以及它实际上是如何工作的，我认为这是一个要点。这并不能真正解决问题。在问题中，视图正在更新而未调用detectChanges（），提问者想知道原因。@MarkRajcok angular始终在内部调用detectChanges来执行视图和组件之间的更改检测。我将重试。。。在代码中，您手动调用detectChanges（）以强制更新视图。在@garethdn的plunker中，视图正在更新，而无需手动调用detectChanges（）。这就是为什么我认为你的例子没有真正解决OP的问题。此外，您不需要在示例中调用

detectChanges（）

，就可以更新视图。试试看。。。注释掉那行代码。只需点击事件火将更新您的视图。这就是OP想要了解的。@MarkRajcok您在一个案例中是正确的，我不需要手动操作，因为事件绑定本身调用了这个.ref.detectChanges（）。@MarkRajcok，但在这个案例中，我向他展示了如何使用ChangeDetectionStrategy.CheckOnce以及它实际上是如何工作的，我相信这是一个要点。