尽管 ChangeDetectionStrategy.OnPush 已配置，但 Augury 显示更改检测默认值

Question

我有一个 Angular(4) 组件，我在其中激活了 ChangeDetectionStrategy.OnPush:

tile.component.ts

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
import { Tile } from './tile';

@Component({
    selector: 'tile',
    template: `
        <div>
        <div>{{this.data.title}}</div>
        <div>{{this.data.image}}</div>
    </div>
    `,
    styleUrls: ['./tile.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class TileComponent {

    @Input() data: Tile;

    constructor() {}
}

tile.ts

import { List, Map } from 'immutable';

export class Tile {
  _data: Map<string, any>;

  get title() {
      return <string> this._data.get('title');
  }

  setTitle(value: string) {
      return new Tile(this._data.set('title', value));
  }

  get image() {
      return <string> this._data.get('image');
  }

  setImage(value: string) {
      return new Tile(this._data.set('image', value));
  }

  constructor(data: any = undefined) {
    data = data || { title: '', image: '' };
    this._data = Map<string, any>(data);
  }
}

但是当我运行它时，Augury 总是向我显示此组件具有 ChangeDetectionStrategy.Default：

没有抛出错误。

有人知道为什么 ChangeDetectionStrategy 会恢复为默认值，或者如果 Augury 可能显示错误的值，我该如何测试 ChangeDetectionStrategy.OnPush 是否确实配置正确？

非常感谢 :)

Answer 1

这是您可以用来检查当前 ChangeDetectionStrategy 的简单测试。添加以下代码：

@Input() data: Tile = {'title': 'title', 'image': 'image'} as Tile; 

constructor() { 
    setTimeout(()=>{ 
          this.data = {'title': 'hello', 'image': 'image'} as Tile; 
          console.log("/// timeout executed"); }, 5000); 
    }

如果您的视图在 5 秒内更新，则为 ChangeDetectionStrategy.Default，否则为 ChangeDetectionStrategy.OnPush。

您提到视图未更新，这意味着当前策略是 OnPush 并且 Augury 显示不正确的信息。

要查看更改，您可以像这样修改示例：

@Input() data: Tile = {'title': 'title', 'image': 'image'} as Tile; 

constructor(private cd: ChangeDetectorRef) { 
    setTimeout(()=>{ 
          this.data = {'title': 'hello', 'image': 'image'} as Tile; 
          console.log("/// timeout executed"); }, 5000); 
          this.cd.detectChanges();
    }

尽管 ChangeDetectionStrategy.OnPush 已配置，但 Augury 显示更改检测默认值

Augury shows Change Detection Default eventhough ChangeDetectionStrategy.OnPush is configured

angular

angular2-changedetection