我应该始终ChangeDetectionStrategy.OnPush在组件中使用吗？

我总是听到OnPush它绝对令人惊讶，并解决了许多问题，加快了Angular应用的速度，甚至摆脱了NgZone。但是，如果是这样，为什么默认情况下不生成它ng g component？

如果真是太神奇了，那我们应该一直使用它吗？

我正在阅读一些有关更改检测的文章，并且尝试使用 和 启用或禁用更改changeDetectorRef.detach()检测changeDetectorRef.reattach()。

我还将该组件挂接到唯一ngDoCheck()发现ngDoCheck()即使在之后也被调用detach()。我究竟做错了什么 ？有人可以解释为什么ngDocheck()被称为吗？我什至也有ChangeDetectionStartegy设置OnPush。 这是我正在阅读的文章以了解变更检测

我还为此创建了一个示例：https ://stackblitz.com/edit/angular-4ytdbs

最小的Stackblitz示例

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

在Angular 7 App中，我创建了一个带有<input>字段的简单组件。

当我使用键盘更改输入值时，我希望该值的格式设置为onBlur。-在最小的示例中，我只想向其中添加字符串“ EDIT”。

这基本上是有效的：

• 如果我输入“ test”并模糊该字段，它将更改为“ test EDIT”
• 如果我输入“ lala”并模糊该字段，它将更改为“ lala EDIT”

但是， 当我键入“测试”-模糊（有效）并再次键入“测试”时，它将不再起作用！

该onInputUpdate()功能全被调用（你可以看到它在控制台日志），变量inputValue被更新（你可以看到它的组件{{inputValue}}），但是输入值不会改变！ 我希望它是“测试编辑”，但它保持“测试”。

当我键入另一个字符串时，它可以工作，但是连续两次在同一字符串中输入却不起作用。这是为什么？我怎样才能解决这个问题？

component.html

{{inputValue}} <br />
<input type="text"
       [ngModel]="inputValue"
       (ngModelChange)="onInputUpdate($event)"
       [ngModelOptions]="{ updateOn: 'blur' }"/>

component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent {

  inputValue = "teststring";

  constructor(
    private changeDetectorRef: ChangeDetectorRef,
  ) {}

  public ngOnInit() {
    this.inputValue = "initial";
  }

  public onInputUpdate(inputValue: string) …

简而言之，我的问题是组件模板中有一个元素。该元素有一个ngIf条件和一个(click)处理程序。它不会从一开始就渲染，因为 ngIf 条件的计算结果为false。

现在有趣的部分来了：在角度区域之外运行的代码将该条件更改为true，并且在detectChanges手动执行更改检测器引用后，该元素将被渲染，并且单击处理程序 ofc 将变为活动状态。

到目前为止，一切似乎都正常，但问题是，当(click)用户单击回调时，不会触发组件的更改检测。

这是复制品https://stackblitz.com/edit/angular-kea4wi

在那里重现它的步骤：

1. 单击米色区域
2. 出现按钮，也单击它
3. 尽管消息应该出现在下面，但什么也没发生

描述：

1. 米色区域有一个通过 addEventListener 注册的点击事件处理程序，并且该事件监听器的回调在角度区域之外运行。在其中，组件的showButton属性设置为从false到true，我通过调用 手动触发更改检测detectChanges()，否则属性中的更改showButton将不会被注册。代码如下所示：

   this.zone.runOutsideAngular(() => {
      const el = this.eventTarget.nativeElement as HTMLElement;
      el.addEventListener('click', e => {
        this.showButton = true;
        this.cd.detectChanges();
      })
    })
   

   Run Code Online (Sandbox Code Playgroud)

2. 现在按钮出现了，这要归功于*ngIf="showButton"最初没有渲染，并且它在模板中声明了一个单击事件处理程序。该处理程序再次更改组件的属性，这次showMessage更改为true.

   <button *ngIf="showButton" (click)="onButtonClick()">Click me!</button>
   
   onButtonClick() {
     this.showMessage = true; …

   Run Code Online (Sandbox Code Playgroud)

我有一个一般性的角度问题：

为什么async使用角管cdr.markForCheck()而不是cdr.detectChanges()？

我认为这两种“风格”有两个主要区别：

1. markForCheck()标记要检查的路径直到根组件 -要更新的内容
2. markForCheck()让变化检测发生在当前或下一个周期 -计时

我的想法或问题：

1. 为什么我们需要检查根的整个路径（在async管道中）？为什么不只是当前组件？( ) - 这与要更新的内容detectChanges()有关

2. 为什么只标记（对于当前/下一个周期 - 使用markForCheck()ngZone）？为什么不立即检测变化？( ) 这与时间detectChanges()有关

3. 如果没有 ngZone 异步触发器/没有异步操作怎么办？那么视图更新不会发生吗？

4. async如果我们改为使用管道会发生什么detectChanges()？

  private _updateLatestValue(async: any, value: Object): void {
    if (async === this._obj) {
      this._latestValue = value;
      this._ref.markForCheck();
    }
  }