Angular 預設的Change detection政策及缺陷

看一個實際例子：

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

@Component({
  selector: 'appparentchild',
  template: `<h1>title</h1>
  {{ JerryHelloChange }}
  <child [childContent] = "parentContent"></child>
  `
})
export class ParentChildComponent implements OnInit {

  public parentContent = 'Jerry 222';
  constructor() { }

  get JerryHelloChange(){
    console.log('change in parent view');
    return true;
  }
  ngOnInit(): void {
    this.parentContent = '1';
    let c = setTimeout;
    setTimeout(() => this.parentContent = '2', 3000);
  }

}

@Component({
  selector: 'child',
  template: `<h1>This is child</h1>
  <h2>{{ childContent }}</h2>
  <button (click)="onClick()">Click Me to trigger Change</button> 

  <span>{{ childContent }}</span>`
})
export class ChildComponent{
  
  @Input()
  childContent: string;

  onClick(){
    setTimeout(()=>{ console.log('timeout!')}, 3000);
  }
}
      

測試結果：

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

@Component({
  selector: 'appparentchild',
  template: `<h1>title</h1>
  {{ JerryHelloChange }}
  <child [childContent] = "parentContent"></child>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentChildComponent implements OnInit {

  public parentContent = 'Jerry 222';
  constructor() { }

  get JerryHelloChange(){
    console.log('change in parent view');
    return true;
  }
  ngOnInit(): void {
    this.parentContent = '1';
    let c = setTimeout;
    setTimeout(() => {
      this.parentContent = '2';
      console.log('change in parent');
    }, 3000);
  }

}

@Component({
  selector: 'child',
  template: `<h1>This is child</h1>
  <h2>{{ childContent }}</h2>
  <button (click)="onClick()">Click Me to trigger Change</button> 

  <span>{{ childContent }}</span>`
})
export class ChildComponent{
  
  @Input()
  childContent: string;

  onClick(){
    setTimeout(()=>{ console.log('timeout!')}, 3000);
  }
}
      

則雖然我在ngOnInit裡将this.parentContent改成了2，但是頁面仍然沒有重新整理，仍然是1：