Angular 8:检测属性的更改

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<div>{{ data }}</div>`
})
export class ExampleComponent {
  data = { value: 1 };

  constructor(private cdr: ChangeDetectorRef) {}

  updateData() {
    this.data.value += 1;
    // 手动触发变更检测
    this.cdr.detectChanges();
  }
}

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

@Component({
  selector: 'app-child',
  template: `<div>{{ data.value }}</div>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent {
  @Input() data: any;
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child [data]="childData"></app-child>`
})
export class ParentComponent {
  childData = { value: 1 };

  updateData() {
    this.childData = { value: this.childData.value + 1 }; // 创建新的引用
  }
}