Angular Augury在配置ChangeDetectionStrategy.OnPush的情况下显示更改检测默认值

我有一个角度（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() {}
}

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是否正确配置

---

非常感谢：）

下面是一个简单的测试，您可以使用它来检查当前的

变更检测策略。添加以下代码：

@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
，并且占卜显示不正确的信息

要查看更改，可以修改示例，如下所示：

@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();
    }

将以下内容放入构造函数
setTimeout（（）=>{this.data.setTitle（'hello'）}，5000）
，是否在5秒内
html
中显示
hello
，可能会将代码放入
ngAfterViewInit
@Maximus我已经将代码稍微修改为：@Input（）data:Tile={'title'：'title'，'image'：'image'}作为Tile；构造函数（）{setTimeout（（）=>{this.data={'title'：'hello'，'image'：'image'}作为Tile；console.log（“///timeout executed”）；}，5000）；}…并且标题没有更改。这意味着更改检测确实是
changedtectionstrategy.OnPush
并且Augury没有正确显示它。要查看差异，请插入构造函数（cd:ChangeDetectorRef）

，并将其应用于超时

cd.detectChanges（）

-应更新视图。阅读更多。