在应用 switchMap 后，valueChanges 不会在输入输入时发出值

【问题标题】：valueChanges does not emit value on input typing after apply switchMap在应用 switchMap 后，valueChanges 不会在输入输入时发出值
【发布时间】：2021-07-02 12:18:24
【问题描述】：

我想知道我的代码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));
})

【问题讨论】：

标签： angular typescript rxjs angular-reactive-forms

【解决方案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 个实例；有了它，你只会得到一个。

【讨论】：