Angular自定义指令如何在页面加载/区块显隐时自动触发执行

@HostListener绑定的ngModelChange事件仅在用户手动修改输入框内容时触发，模型初始赋值、*ngIf控制区块显隐导致的指令重挂载、接口异步返回更新模型这三类场景都不会触发该事件，因此转换逻辑不会执行。另外原有逻辑仅通过valueAccessor.writeValue更新了视图，没有同步修改绑定的模型值，会出现视图显示大写、实际模型值仍是小写的不一致问题。

要覆盖全触发场景，需要在指令初始化时主动执行一次值转换，同时订阅表单控件的值变更流捕获所有来源的值更新，写入值时同步更新模型和视图，避免数据不一致。

修复后的完整指令代码 #

import { Directive, OnInit } from '@angular/core';
import { NgControl } from '@angular/forms';

@Directive({
  selector: '[appUpperCase]'
})
export class UpperCaseDirective implements OnInit {

  constructor(private control: NgControl) { }

  private processInput(value: any): string {
    if (value === null || value === undefined) return '';
    return String(value).toUpperCase();
  }

  ngOnInit(): void {
    // 指令初始化（首次加载/区块显示重挂载）时立即处理初始值
    this.transformValue();
    // 订阅所有来源的值变更：用户输入、程序赋值、接口更新均会触发
    this.control.valueChanges?.subscribe(() => {
      this.transformValue();
    });
  }

  private transformValue(): void {
    const currentValue = this.control.control?.value;
    const transformedValue = this.processInput(currentValue);
    // 值无差异时跳过写入，避免死循环
    if (currentValue === transformedValue) return;

    // 同步更新模型和视图
    this.control.control?.setValue(transformedValue, {
      emitEvent: false,
      emitModelToViewChange: true
    });
  }
}

原有代码中绑定的ngModelChange、keydown.backspace监听可以全部删除，valueChanges流已经覆盖了所有用户交互触发的值变更场景，不需要单独监听键盘事件。

• 初始化阶段主动执行转换：只要指令被实例化（首次页面加载、*ngIf控制区块从隐藏变为显示时指令会重新创建），就会第一时间处理当前绑定的模型值，解决初始值不转换的问题
• 订阅valueChanges流：不管是用户手动输入、组件内代码给userName重新赋值、Service接口返回结果后更新模型，所有值变更场景都会被捕获，不需要针对单个交互事件写监听
• 写入值时配置emitEvent: false：避免触发新的valueChanges事件导致递归死循环
• 通过control.setValue统一更新：自动同步模型值和视图显示，不会出现输入框显示大写、模板插值的{{ userName }}仍是小写的不一致问题

修复后，组件初始赋值的小写test会在页面加载时自动转换为TEST，输入框显示和模型值保持一致；如果输入框所在区块通过接口返回结果控制显隐，区块显示时指令会自动执行转换逻辑。

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