Angular能否通过动态inputmode属性值自动匹配对应自定义指令？

问题原因 #

Angular的指令匹配是在模板编译阶段或组件初始化时完成的，动态修改inputmode属性值并不会触发Angular重新检查并应用对应指令——指令与元素的关联是一次性的，属性动态变化不会改变已绑定的指令集合。

简化方案 #

方案1：合并指令逻辑为单一动态指令（推荐）

将多个模式对应的指令逻辑整合到一个主指令中，通过监听inputmode的变化切换行为，避免重复编写<input>元素。

import { Directive, Input, ElementRef, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: 'input[dynamicInputHandler]',
  inputs: ['inputmode']
})
export class DynamicInputHandlerDirective implements OnChanges {
  @Input() inputmode!: string;
  private currentListeners: (() => void)[] = [];

  constructor(private el: ElementRef<HTMLInputElement>) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes['inputmode']) {
      this.cleanup();
      this.applyModeBehavior(this.inputmode);
    }
  }

  private applyModeBehavior(mode: string) {
    switch (mode) {
      case 'numeric':
        this.setupNumericBehavior();
        break;
      case 'decimal':
        this.setupDecimalBehavior();
        break;
      case 'XXX':
        this.setupXXXBehavior();
        break;
      default:
        break;
    }
  }

  private setupNumericBehavior() {
    const keydownListener = (e: KeyboardEvent) => {
      if (!/\d|ArrowUp|ArrowDown|Backspace|Delete/.test(e.key)) {
        e.preventDefault();
      }
    };
    this.el.nativeElement.addEventListener('keydown', keydownListener);
    this.currentListeners.push(() => {
      this.el.nativeElement.removeEventListener('keydown', keydownListener);
    });
    // 补充原NumericDirective的blur格式化、focus解析等逻辑
  }

  private setupDecimalBehavior() {
    const keydownListener = (e: KeyboardEvent) => {
      if (!/\d|\.|ArrowUp|ArrowDown|Backspace|Delete/.test(e.key)) {
        e.preventDefault();
      }
      if (e.key === '.' && this.el.nativeElement.value.includes('.')) {
        e.preventDefault();
      }
    };
    this.el.nativeElement.addEventListener('keydown', keydownListener);
    this.currentListeners.push(() => {
      this.el.nativeElement.removeEventListener('keydown', keydownListener);
    });
    // 补充原Decimal相关逻辑
  }

  private setupXXXBehavior() {
    // 复制原XXXDirective的逻辑，比如特定输入验证、DI服务调用等
  }

  private cleanup() {
    this.currentListeners.forEach(cleanup => cleanup());
    this.currentListeners = [];
    // 清理其他DOM修改或状态
  }
}

模板使用：

<input [inputmode]="currentMode" dynamicInputHandler />

这种方案无需重复创建<input>元素，动态切换currentMode时自动切换输入行为，代码维护性更强。

方案2：使用NgTemplateOutlet简化模板切换

如果不想合并指令逻辑，可以用NgTemplateOutlet替代ng-switch，让模板结构更清晰：

组件代码：

import { Component, ViewChild, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-dynamic-input',
  templateUrl: './dynamic-input.component.html'
})
export class DynamicInputComponent {
  currentMode: string = 'numeric';

  @ViewChild('numericTpl') numericTpl!: TemplateRef<any>;
  @ViewChild('decimalTpl') decimalTpl!: TemplateRef<any>;
  @ViewChild('XXXtpl') XXXtpl!: TemplateRef<any>;

  get activeTemplate() {
    switch (this.currentMode) {
      case 'numeric': return this.numericTpl;
      case 'decimal': return this.decimalTpl;
      case 'XXX': return this.XXXtpl;
      default: return null;
    }
  }
}

模板代码：

<ng-container [ngTemplateOutlet]="activeTemplate"></ng-container>

<ng-template #numericTpl><input inputmode="numeric" /></ng-template>
<ng-template #decimalTpl><input inputmode="decimal" /></ng-template>
<ng-template #XXXtpl><input inputmode="XXX" /></ng-template>

这种方式本质还是为每个模式创建独立的<input>实例（每个实例绑定对应指令），但模板结构比ng-switch更简洁。

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