angular - changeDetection : ChangeDetectionStrategy. OnPush 似乎不起作用？

Question

https://stackblitz.com/edit/angular-xpamld

问题:有人能帮我理解为什么我的原型(prototype)的 changeDetection: ChangeDetectionStrategy.OnPush 仍然允许我更新内部值 name 吗？如果这不是 ChangeDetectionStrategy.OnPush 应该阻止的，它应该做什么？

app.component.ts:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent  {
  public name = 'Angular 5';
  public changeName() {
    this.name = 'Outer';
  }
}

app.component.html:

<hello name="{{ name }}"></hello>
<button (click)="changeName()">Outter Change</button>
<p>{{name}}-- outer</p>
<p>
  Start editing to see some magic happen :)
</p>

hello.component.ts:

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1> <button (click)="changeName()">inner Change</button>`,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HelloComponent  {
  @Input() name: string;


  public changeName() {
    this.name = 'Inner';
  }
}

Answer 1

因为原始数据类型是不可变的 - 如果您更改它，它的引用也会更改，所以您的组件的 ChangeDetectorRef 知道它必须检测更改(因为 OnPush 查找引用更改，而不是数组、对象中的数据突变)。如果你想在基元上避免这种情况，你可以使用 detach()/reattach() 在 ChangeDetectorRef 实例上手动停用/激活它:

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

export class HelloComponent  {
  @Input() name: string;

 constructor(private ref: ChangeDetectorRef) {}

  public changeName() {
    this.ref.detach();
    this.name = 'Inner';
  }
}