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

https://stackblitz.com/edit/angular-xpamld
问：有人能帮助我理解为什么我的原型仍然允许我更新内部值吗？如果这不是changeDetection: 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';
  }
}

最佳答案

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

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

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

 constructor(private ref: ChangeDetectorRef) {}

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

关于angular - changeDetection:ChangeDetectionStrategy.OnPush似乎不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48605736/