Question

这可能是我自己对Angular 2变更检测的工作方式的误解，但我希望如果某个组件ChangeDetectionStrategy设置为Checked，CheckOnce或{ {1}}，该组件仅在实例化组件时检查一次更改。它似乎不会那样发生。

Detached

点击后我希望切换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; } }属性，但我不希望视图更新。碰巧，视图会更新。 hasThing也设置为ChangeDetectionStrategy时会发生。

http://plnkr.co/edit/2hHdt2BDpj419Z32iPjJ?p=preview

我在这里缺少什么？究竟是什么导致视图更新？从我所看到的情况来看，无论我更新Detached属性，视图都会更新点击值是否已更改。

Answer 1

我希望这会帮助你理解它：）

http://plnkr.co/edit/sM8CCSl8hXyRVAaTZH4N?p=preview

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

import { Injectable } from 'angular2/core';

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

当角点发现任何异步事件通过区域api改变时，区域在该上下文中通知角度发生异步事件并将其传播到角度变化检测api以在实际视图和组件之间进行检查，并且在下面的示例中我们可以看到由于更改检测行为未更改，因此角度不断更新视图：

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);

场景二具有更改检测行为的更改，因为ChangeDetectionStrategy设置为CheckOnce angular将在组件初始化过程中仅触发一次更改检测，在这种情况下，您必须手动触发更改以更新视图，在这种情况下由事件完成结合：

import {
  Component,
  ChangeDetectionStrategy, 
  ChangeDetectorRef
} from 'angular2/core';
import { DataProvider } from './data-provider';

@Component({
  selector: 'data-change-trigger', 
  changeDetection: ChangeDetectionStrategy.CheckOnce,
  template: `
    Trigger update: 
    <button (click)="update($event)">Update</button>
    <div>{{dataProvider.data}}</div>
  `
})
export class TriggerDataChange {

  constructor(
    private ref: ChangeDetectorRef, 
    private dataProvider:DataProvider
  ) {}

  update($event) {
     console.log('event', $event);
  }
}

最后回答为什么在您的案例视图中更新？这是因为模板中的事件绑定：

(click)="onClick($event)"

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

Answer 2

无论ChangeDetectionStrategy设置如何，Angular都会检查组件的变化

组件触发事件
一个observable触发一个事件，并且在该视图中使用异步管道并使用该observable

这个想法是......如果组件触发了一个事件，或者一个绑定的可观察值发生了变化，那么你很可能想要更新它的视图。

无论分离设置

2 个答案: