Angular(2+)中父指令如何为子input动态添加指令？

当然可以实现！Angular 2+虽然和AngularJS的指令机制差异不小，但完全能达成你想要的效果——给<form>宿主下的所有type="text"的<input>动态附加anotherDirective，甚至逻辑上更清晰可控。

核心思路 #

AngularJS里的pre/post链接函数，对应到Angular 2+的生命周期钩子（比如ngAfterContentInit），而动态操作元素和指令的逻辑，我们可以通过ContentChildren获取宿主下的子元素，再结合Angular的指令创建API来完成。

具体实现步骤 #

1. 先定义目标指令 anotherDirective

假设这是一个简单的属性指令，用来标识或处理input元素：

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

@Directive({
  selector: '[anotherDirective]'
})
export class AnotherDirective {
  constructor(private el: ElementRef) {
    // 示例：给目标input添加蓝色边框作为标识
    this.el.nativeElement.style.border = '1px solid #4285F4';
  }
}

2. 实现宿主指令 myDirective

这个指令会作用在<form>上，负责筛选子元素并动态添加anotherDirective：

import { Directive, ContentChildren, ElementRef, QueryList, AfterContentInit, ViewContainerRef, Injector } from '@angular/core';
import { AnotherDirective } from './another.directive';

@Directive({
  selector: '[myDirective]'
})
export class MyDirective implements AfterContentInit {
  // 获取宿主元素下所有的子元素（包括后代）的ElementRef
  @ContentChildren(ElementRef, { descendants: true }) private allElements!: QueryList<ElementRef>;

  constructor(
    private viewContainerRef: ViewContainerRef,
    private injector: Injector
  ) { }

  ngAfterContentInit(): void {
    // 筛选出所有type为text的input元素
    const textInputs = this.allElements.filter(el => 
      el.nativeElement.tagName === 'INPUT' && el.nativeElement.type === 'text'
    );

    // 给每个符合条件的input动态添加anotherDirective
    textInputs.forEach(inputEl => {
      // Angular 9+推荐用createDirective方法创建并附加指令
      this.viewContainerRef.createDirective(AnotherDirective, {
        injector: this.injector,
        hostElement: inputEl.nativeElement
      });
    });
  }
}

3. 在模板中使用

直接在<form>上添加myDirective即可：

<form myDirective>
  <input type="text" placeholder="会被添加anotherDirective" />
  <input type="text" placeholder="也会被添加" />
  <input type="password" placeholder="不会被添加（不是text类型）" />
</form>

关键细节说明 #

• 生命周期钩子选择：用ngAfterContentInit是因为要等宿主的内容（也就是<form>里的所有子元素）都初始化完成后，才能准确获取到所有input元素，避免出现找不到元素的情况。
• 指令创建API：Angular 9+之后推荐用ViewContainerRef.createDirective()来动态创建指令，替代了旧的DirectiveFactoryResolver，API更简洁。
• 元素筛选：通过tagName和type属性筛选出目标input，确保只给符合需求的元素添加指令。

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