应用 switchMap 后，valueChanges 不会在输入类型上发出值

Question

我想知道我这里的代码有什么问题 https://stackblitz.com/edit/angular-ivy-rc4fq8。我使用 widgetNameForm$ 传递给子组件。而 switchMap 应该切换到 valueChanges 流并在输入类型时发出值，但这种方法令人惊讶地不起作用。以前我使用了下面描述的其他代码，但它有嵌套订阅，我想坚持使用像 stackblitz

中描述的更具反应性的方法

 this.widgetName$.subscribe(val => {
  this.widgetNameForm = this.formBuilder.group({
    name: [val, {validators: Validators.required}]
  });

  this.widgetNameForm.valueChanges.pipe(
    takeUntil(this.destroy$)
  ).subscribe(val => console.log('it emits value on typing', val));
})

Answer 1

您有 2 个不同的订阅：

构造函数中的一个
模板中的一个通过 async 管道

您的问题是每个订阅都会收到一个单独的 FormGroup 实例。这意味着您在控制器中订阅的实例不是传递给子组件并绑定到表单的实例，因此不会发出 valueChanges。

您可以通过使用 shareReplay 运算符共享单个订阅来解决此问题：

this.widgetNameForm$ = this.widgetName$.pipe(
  map(val => this.formBuilder.group({ name: [val, {validators: Validators.required}] })),
  shareReplay() // <---
);

查看 this StackBlitz。请注意，“实例 ID”显示在输入字段中。如果注释掉 shareReplay() 行，您会看到最终得到 2 个实例；有了它你只能得到一个。

应用 switchMap 后，valueChanges 不会在输入类型上发出值

valueChanges does not emit value on input typing after apply switchMap

rxjs

typescript

angular

angular-reactive-forms