如何在RxJS中监听属性变化？Angular6非响应式表单实现方案

这事儿很简单，不用依赖响应式表单就能搞定。核心思路是用RxJS的Subject（或BehaviorSubject）来手动捕获输入值的变化，然后给这个Observable添加你需要的debounce之类的操作符。下面是完整的实现步骤：

1. 组件代码实现 #

首先在你的组件里引入必要的RxJS工具，创建Subject来承载输入值的流，然后在初始化时配置操作符并订阅：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  // 绑定模板的原始变量
  searchTerm: string = '';
  // 用于承载输入值流的Subject
  private searchTermSubject$ = new Subject<string>();
  // 保存订阅实例，用于销毁时取消订阅
  private searchSubscription?: Subscription;

  ngOnInit(): void {
    // 配置Observable的操作符并订阅
    this.searchSubscription = this.searchTermSubject$.pipe(
      debounceTime(300), // 等待300ms无输入后再触发后续逻辑
      distinctUntilChanged() // 只有值真正变化时才触发，避免重复操作
    ).subscribe((term) => {
      // 这里写你需要的业务逻辑，比如调用搜索接口
      console.log('处理搜索关键词:', term);
    });
  }

  // 响应输入值变化的方法
  onSearchTermUpdate(newTerm: string): void {
    this.searchTerm = newTerm;
    // 把新值推送到Subject中
    this.searchTermSubject$.next(newTerm);
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.searchSubscription?.unsubscribe();
    this.searchTermSubject$.complete();
  }
}

2. 修改模板中的输入框 #

把原来的双向绑定语法[(ngModel)]拆分成单向绑定[ngModel]和变化事件(ngModelChange)，这样我们就能手动控制值的推送：

<input 
  type="text" 
  name="searchBox" 
  [ngModel]="searchTerm" 
  (ngModelChange)="onSearchTermUpdate($event)" 
  class="form-control" 
/>

额外说明 #

• 如果你的场景需要初始值（比如页面加载时就触发一次搜索），可以把Subject换成BehaviorSubject，初始化时传入默认值：

  private searchTermSubject$ = new BehaviorSubject<string>('');
  

  这样订阅时会先收到这个初始值。
• Angular 6对应的RxJS版本是6.x，所以必须用pipe()来组合操作符，这是RxJS 6之后的标准写法，和旧版本的链式调用不同。
• 一定要在ngOnDestroy里取消订阅并完成Subject，这是Angular组件开发中避免内存泄漏的最佳实践。

内容的提问来源于stack exchange，提问作者gog