Angular RXJS中valueChanges事件Observable未捕获问题咨询

valueChanges 返回RxJS冷Observable，这类流的核心特性是：只有被订阅时才会启动数据流推送，pipe内的所有操作符逻辑才会执行。当前代码仅通过pipe编排了操作逻辑，既没有手动订阅，也没有通过其他方式触发订阅，输入值变化时map中的日志自然不会输出。
另外注意：map操作符的设计用途是做流值转换，在其中写console.log这类副作用逻辑不符合RxJS规范，处理副作用应该使用tap操作符。

使用Angular官方async管道自动触发订阅，该管道会自动管理订阅生命周期，组件销毁时自动取消订阅，无内存泄漏风险，是Angular处理Observable流的推荐实践。

• 调整组件类代码
  导入tap操作符，将值变更流定义为组件属性，全程不手动调用subscribe：

// 顶部导入操作符
import { tap } from 'rxjs/operators';
import { Observable } from 'rxjs';

// 组件类内定义流属性
firstLastNameChange$: Observable<string>;

// 表单初始化逻辑
this.step1FormGroup = this.formBuilder.group({
  firstLastName: new FormControl('')
});

this.firstLastNameChange$ = this.step1FormGroup.get('firstLastName').valueChanges.pipe(
  tap((inputValue) => {
    console.log('oy!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
    // 此处编写值变更后需要执行的业务逻辑
  })
);

• 调整模板代码
  在表单模板内添加不渲染可见内容的ng-container节点，通过*ngIf绑定流与async管道，async管道实例化后会自动触发流订阅：

<form [formGroup]="step1FormGroup">
  <ng-template matStepLabel>Fill out your name</ng-template>
  <mat-form-field>
    <input matInput
      placeholder='Last name, First name'
      formControlName='firstLastName'>
  </mat-form-field>
  <!-- 新增节点无可见输出，仅用于触发async管道订阅 -->
  <ng-container *ngIf="firstLastNameChange$ | async"></ng-container>
</form>

调整完成后，输入框内容变更时tap内的逻辑会正常触发，全程不需要手动调用.subscribe()方法。

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker