如何通过RxJS Subject重复触发Angular Input setter？

Angular的@Input setter仅在输入值发生引用或值类型变化时才会触发，你直接调用next()传递默认的undefined，后续值无变化，所以setter只执行一次。以下是几种不传递业务值就能触发setter的方案：

方案1：传递自增的标识值（最贴合需求） #

用Subject传递每次都不同的简单值（比如自增数字），让Angular检测到值变化，同时你不需要关心这个值的具体含义，仅用它触发setter：

父组件代码：

private triggerCount = 0;
save$ = new Subject<number>();

// 键盘事件订阅
fromEvent(window, 'keydown').subscribe(() => {
  this.save$.next(this.triggerCount++); // 每次传不同的数字
});

子组件代码：

@Input() set save(_: number) { // 下划线表示不需要使用这个值
  console.log('save'); // 每次键盘事件都会触发
}

HTML绑定保持不变：

<some-component [save]="(save$ | async)" />

方案2：直接在子组件订阅父组件的Subject（更简洁） #

绕开@Input的变化检测，直接把Subject实例传给子组件，让子组件订阅信号：

父组件代码：

save$ = new Subject<void>();

fromEvent(window, 'keydown').subscribe(() => {
  this.save$.next();
});

父组件HTML：

<some-component [saveSignal]="save$" />

子组件代码：

@Input() saveSignal!: Subject<void>;

ngOnInit() {
  this.saveSignal.subscribe(() => {
    console.log('save'); // 每次next都会触发
  });
}

// 记得销毁订阅避免内存泄漏
ngOnDestroy() {
  this.saveSignal.unsubscribe();
}

方案3：手动触发变更检测（不推荐，仅作补充） #

如果一定要用@Input传递undefined，可以在父组件每次next后手动触发变更检测，强制Angular更新绑定：

父组件代码：

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

save$ = new Subject<void>();

fromEvent(window, 'keydown').subscribe(() => {
  this.save$.next();
  this.cdr.detectChanges(); // 强制触发变更检测
});

子组件代码不变，这种方法会增加不必要的变更检测开销，除非特殊情况不建议使用。

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