在 Angular 组件模板中使用吸气剂？

Question

假设我们有一个 getter 定义如下：

  get sku() {
    return this.form.get('sku').value
  }

我们这样使用它：

    <mat-hint *ngIf="!sku">Example sku123</mat-hint>

从Angular变化检测性能的角度来看，是否有更好的方法来做到这一点？

我们可以使用 Observable。我认为是这样的（粗略）：

sku$ = this.form.get('sku').valueChanges().pipe(untilDestroyed(this))

<mat-hint *ngIf="!(sku|async)">Example sku123</mat-hint>

一个比另一个好吗？

IIUC getter 会在检测到变化时被调用，但是如果我们使用 ChangeDetectionStrategy.OnPush 和 Observable 那么只会在表单更新时收到通知？

Answer 1

使用 ChangeDetectionStrategy.OnPush 将不会在 *ngIf 视图中将更改应用到您的 sku，因为自动更改检测现在已停用。只有事件会被触发而不改变视图。因此，您必须使用

显式调用它


constructor(private cdRef: ChangeDetectorRef) {}

this.form.valueChanges
    .subscribe(() => {
      this.cdRef.markForCheck();
    });
  }

<mat-hint *ngIf="!sku">Example sku123</mat-hint>

注意：使用 ChangeDetectionStrategy.OnPush 会提高性能，因为它只运行一次循环。但是当涉及到反应形式时会变得复杂。而且父组件中使用 ChangeDetectionStrategy.OnPush 的所有子组件都将被继承，如果需要，您将不得不手动调用它们。

Answer 2

Getter 对性能来说很好，除非函数很昂贵，因为它会在每个循环中调用。在这种情况下，首选管道，因为结果会被缓存。

Using getters in Angular Component Templates?