使用 @Input() 和 ChangeDetectorRef

使用 OnPush 策略将组件标记为仅在输入属性发生更改时才进行变更检测。

但如果您想要手动通知组件进行更改检测，例如在处理异步数据时，您可以使用 ChangeDetectorRef。

以下是一个示例：

组件类：

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

@Component({
  selector: 'my-component',
  template: `{{ name }}`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComponent {
  @Input() name: string;

  constructor(private cdr: ChangeDetectorRef) {}

  updateName() {
    setTimeout(() => {
      this.name = 'John';
      // 手动触发变更检测
      this.cdr.detectChanges();
    }, 1000);
  }
}

在上面的例子中，我们使用 @Input() 来接收父组件传递的数据，并使用 OnPush 策略来在输入属性发生更改时进行变更检测。

我们还定义了一个 updateName() 方法，在该方法中使用 setTimeout() 模拟一个异步操作，并将组件的 name 属性更改为 'John'。

因为我们使用了 OnPush 策略，更新 name 属性并不会触发变更检测。因此，我们使用 ChangeDetectorRef 手动触发变更检测。

父组件模板：

Update Name

在父组件中，我们将 name 属性绑定到子组件的输入属性，并使用一个按钮来触发 updateName() 方法，从而更新子组件的 name 属性并手动触发变更检测。