Angular封装NgxMaskDirective时，动态输入是否只能手动调用ngOnChanges？

问题背景 #

我正在Angular 21中构建一个可复用的掩码指令，封装NgxMaskDirective作为宿主指令，目标是支持巴西常用文档的命名掩码（CPF、CNPJ、电话号码、邮政编码等），同时允许传入原始掩码字符串作为备选方案。当前实现代码如下：

export type NamedMask = 'cnpj' | 'cpf' | 'phone' | 'cnpj-cpf' | 'zip-code';

const MASKS: Record<NamedMask, string> = {
  cnpj: '00.000.000/0000-00',           // 巴西公司注册号
  cpf: '000.000.000-00',                // 巴西个人税号
  phone: '(00) 0000-0000||(00) 00000-0000', // 8位或9位电话号码
  'cnpj-cpf': '000.000.000-00||00.000.000/0000-00', // 同时支持CPF和CNPJ
  'zip-code': '00000-000',              // 巴西邮政编码（CEP）
};

@Directive({
  selector: '[mascara]',
  hostDirectives: [
    {
      directive: NgxMaskDirective,
      inputs: ['patterns', 'prefix', 'suffix'],
    },
  ],
})
export class MaskDirective {
  readonly mascara = input.required<NamedMask | string>();

  private readonly maskDir = inject(NgxMaskDirective);

  private readonly resolvedMask = computed(() =>
    MASKS[this.mascara() as NamedMask] ?? this.mascara()
  );

  constructor() {
    effect(() => {
      this.maskDir.ngOnChanges({
        mask: new SimpleChange(undefined, this.resolvedMask(), true),
      });
    });
  }
}

问题说明 #

NgxMaskDirective暴露了mascara、dropSpecialCharacters和clearIfNotMatch作为标准@Input()属性，但使用hostDirectives时只能转发inputs数组中明确列出的输入。这三个属性未被列出，因为我需要拦截并转换它们（尤其是mascara，需将友好名称映射为实际模式字符串）。目前我只能手动调用ngOnChanges()并传入SimpleChange对象来传递解析后的值，感觉像是滥用内部API。

疑问 #

1. 在该场景下，手动调用注入的宿主指令的ngOnChanges()是预期/推荐的方式，还是属于取巧的做法？
2. 是否有更简洁的Angular 19+ API（基于信号或其他方式），无需通过ngOnChanges()即可将解析/转换后的值传入宿主指令的输入？
3. 在此场景下，是否完全避免使用hostDirectives，改为以编程方式应用NgxMaskDirective，或直接复制其逻辑会更好？

解答 #

1. 手动调用ngOnChanges()的合理性

这属于非推荐的取巧手段。ngOnChanges是Angular框架负责触发的生命周期钩子，手动调用会绕过框架的变更检测流程，可能引发状态不一致问题——比如后续框架自动触发的变更会覆盖你手动设置的值，或者NgxMask内部依赖的初始化逻辑未被正确执行。此外，若NgxMask后续修改ngOnChanges的实现，你的代码会直接失效，维护风险很高。

2. Angular 19+的最优方案：信号驱动的输入映射

Angular 19+升级了hostDirectives的输入映射能力，支持通过信号转换函数直接传递处理后的值，无需手动调用生命周期钩子。你可以将hostDirectives的inputs配置为对象形式，对需要转换的输入进行映射：

export type NamedMask = 'cnpj' | 'cpf' | 'phone' | 'cnpj-cpf' | 'zip-code';

const MASKS: Record<NamedMask, string> = {
  cnpj: '00.000.000/0000-00',           // 巴西公司注册号
  cpf: '000.000.000-00',                // 巴西个人税号
  phone: '(00) 0000-0000||(00) 00000-0000', // 8/9位电话号码
  'cnpj-cpf': '000.000.000-00||00.000.000/0000-00', // 兼容CPF/CNPJ
  'zip-code': '00000-000',              // 巴西邮政编码（CEP）
};

@Directive({
  selector: '[mascara]',
  hostDirectives: [
    {
      directive: NgxMaskDirective,
      inputs: {
        // 直接转发无需转换的输入
        patterns: 'patterns',
        prefix: 'prefix',
        suffix: 'suffix',
        // 转换命名掩码为实际格式字符串
        mask: () => this.resolvedMask(),
        // 转发其他需要暴露的输入
        dropSpecialCharacters: 'dropSpecialCharacters',
        clearIfNotMatch: 'clearIfNotMatch'
      },
    },
  ],
  standalone: true,
  inputs: ['dropSpecialCharacters', 'clearIfNotMatch']
})
export class MaskDirective {
  readonly mascara = input.required<NamedMask | string>();
  readonly dropSpecialCharacters = input<boolean>(false);
  readonly clearIfNotMatch = input<boolean>(false);

  private readonly resolvedMask = computed(() =>
    MASKS[this.mascara() as NamedMask] ?? this.mascara()
  );
}

这种方式完全符合Angular信号驱动的设计，转换后的信号值会自动同步到宿主指令的输入中，框架会负责处理变更检测，没有内部API滥用的风险。

3. 是否需要放弃hostDirectives？

不需要。hostDirectives就是为封装现有指令、扩展其功能而设计的。手动实例化指令或复制NgxMask的逻辑会大幅增加维护成本：复制逻辑意味着你要持续跟进NgxMask的更新，手动实例化则需要处理指令绑定、变更检测等底层细节，容易引入bug。只有当NgxMask存在大量私有API依赖、无法通过hostDirectives满足需求时，才需要考虑替代方案，你的场景显然不满足这个条件。

内容的提问来源于stack exchange，提问作者Max Bündchen