未设置子组件中输入属性的角度异步管道

Question

似乎子组件仅在 Observable 第一次发射时才被设置。

容器组件（为调试添加了map操作符）：

this.form$ = this.createOrderStore.pipe(select(getFormGroup)).pipe(
  tap((val) => {
    console.log('observable emitted');
    console.log(val);
    return val;
  })
);

子组件：

private _form: FormGroup;
@Input()
set form(val) {
  console.log('set form');
  if (val) {
    this._form = val;
  }
}
get form() {
  return this._form;
}

容器模板：

<app-order-form [form]="form$ | async"></app-order-form>

observable 第一次发射时，控制台显示“observable emit”，val 未定义，然后是“set form”。但是，由于第一个值是未定义的，我们还没有在模板中设置它。

observable 第二次发出，控制台记录'observable emit'，val 是一个完整的表单组（因此它应该触发更改检测），但没有记录'set form'。这第二个值是我实际需要在模板中设置的值。

只有在 observable 第一次发射时才设置子组件属性有什么原因吗？

Answer 1

我相信您的问题仅在您拥有 ChangeDetectionStrategy 到 OnPush 时才会发生。由于getFormGroup 方法，您可能在ngAfterViewInit 挂钩中设置了this.form$，对吗？有两种方法可以解决这个问题。

简单的方法，使用ChangeDetectorRef

容器组件：

constructor(readonly cd: ChangeDetectorRef) {}

ngAfterViewInit(): void {
   // ...

   this.form$ = this.createOrderStore.pipe(select(getFormGroup));
   this.cd.markForCheck();
}

另一种方法是使用Subject 来更新formGroup，并在类构造中使用已定义forms$

formGroup$ = new ReplaySubject<FormGroup>(1);

readonly form$ = this.formGroup$.pipe(
  mergeMap((formGroup) => this.createOrderStore.pipe(
    select(formGroup)
  ))
);

ngAfterViewInit(): void {
   // ...
   this.formGroup$.next(getFormGroup);
}

只是为了澄清目前代码中发生的情况是容器组件上的form$ 属性未定义。那是您正在登录子组件的未定义，并且因为您在 ngAfterViewInit 挂钩内设置了 form$，它不会被更改检测器拾取，除非您明确告诉它进行检查