为何使用ng-neat input-mask无法动态更新输入框的掩码规则？

动态绑定失效的根本原因 #

你用到的ng-neat/input-mask和ngx-mask两款库的掩码指令，默认设计都是仅在组件初始化阶段读取一次传入的掩码配置，内部没有对@Input()传入的掩码值做变化监听，所以后续绑定值更新后，指令内部不会重新初始化掩码实例，自然不会生效，不是你配置遗漏的问题。

你找到的临时方案的原理 #

这个方案的核心是延后掩码的初始化时机：

• 初始给掩码传null，指令初始化时拿到null值不会生成掩码实例
• 等输入框初始化完成、你确定要使用的掩码规则后，再通过BehaviorSubject推送实际的掩码值
• 搭配async管道订阅后，模板会触发更新，这时候指令才首次拿到有效的掩码值，走正常的初始化流程，相当于绕开了「初始化后不能改掩码」的限制。

适配你现有代码的修复方案 #

这里提供两种可直接用的修复方式：

方案1：使用key属性强制重建元素

给input元素绑定key属性，值和你切换掩码的变量绑定，变量变化时Angular会自动销毁重建整个input元素，指令会重新初始化拿到最新的掩码值，修改another.component.html代码即可：

// another.component.html
<div>
    <input
      [key]="mask"
      [formControl]="ipAddress"
      [inputMask]="mask ? ipAddressMask : numberMask"
      placeholder="IP Address"
    /> 
</div>

方案2：使用RxJS主题+async管道实现动态更新

和你找到的方案逻辑一致，修改对应代码即可：

// another.component.ts 新增部分代码
import { BehaviorSubject } from 'rxjs';

export class AnotherComponent {
  @Input() mask: boolean;
  // 新增掩码主题，初始值为null
  mask$ = new BehaviorSubject<any>(null);

  ngOnChanges(simple: SimpleChanges) {
    if (simple?.mask) {
      // 监听mask输入变化，推送对应的掩码
      this.mask$.next(this.mask ? this.ipAddressMask : this.numberMask);
    }
  }
  // 其余原有代码保持不变
}

// another.component.html 调整input的绑定
<div>
    <input
      [formControl]="ipAddress"
      [inputMask]="mask$ | async"
      placeholder="IP Address"
    /> 
</div>

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