Angular 12中如何通过指令合法访问子元素？

问题场景 #

在Angular 12中使用指令操作DOM时，当前能通过ElementRef获取指令所在的父元素（someHeadWrapper），但需要操作它的子元素someSecondWrapper和someBtn。直接通过nativeElement.children获取子元素的方式依赖DOM结构顺序，后续HTML结构变更时必须同步修改指令，不符合Angular规范开发方式。

规范解决方案 #

1. 使用ContentChild/ContentChildren获取指定子元素 #

Angular提供的ContentChild和ContentChildren装饰器，可通过模板引用变量或CSS选择器直接定位内容子元素，不依赖DOM结构的排列顺序。

示例代码

修改HTML，为目标子元素添加模板引用变量：

<div id="someHeadWrapper" appSomeDirective>
  <div id="someSecondWrapper" #secondWrapper>Whatever...</div>
  <button id="someBtn" #someBtn>ClickMe</button>
</div>

指令代码实现：

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

@Directive({
  selector: '[appSomeDirective]'
})
export class SomeDirective implements AfterContentInit {
  // 通过模板引用变量获取单个子元素
  @ContentChild('secondWrapper') secondWrapperEl: ElementRef<HTMLDivElement>;
  @ContentChild('someBtn') someBtnEl: ElementRef<HTMLButtonElement>;

  // 也可通过CSS选择器获取（如id选择器）
  // @ContentChild('#someSecondWrapper') secondWrapperEl: ElementRef<HTMLDivElement>;

  ngAfterContentInit() {
    // 确保子元素已完成初始化再操作
    if (this.secondWrapperEl) {
      // 示例：修改子元素样式
      this.secondWrapperEl.nativeElement.style.color = 'red';
    }
    if (this.someBtnEl) {
      // 示例：为按钮绑定点击事件
      this.someBtnEl.nativeElement.addEventListener('click', () => {
        alert('按钮被点击');
      });
    }
  }
}

2. 通过@Input传递子元素引用 #

将父组件中已获取的子元素引用通过@Input传递给指令，这种方式让指令与子元素的关联更明确，耦合度更低。

示例代码

父组件HTML：

<div id="someHeadWrapper" appSomeDirective 
     [targetSecondWrapper]="secondWrapper" 
     [targetBtn]="someBtn">
  <div id="someSecondWrapper" #secondWrapper>Whatever...</div>
  <button id="someBtn" #someBtn>ClickMe</button>
</div>

指令代码实现：

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

@Directive({
  selector: '[appSomeDirective]'
})
export class SomeDirective implements OnInit {
  @Input() targetSecondWrapper: ElementRef<HTMLDivElement>;
  @Input() targetBtn: ElementRef<HTMLButtonElement>;

  ngOnInit() {
    if (this.targetSecondWrapper) {
      // 执行子元素操作逻辑
    }
    if (this.targetBtn) {
      // 执行按钮操作逻辑
    }
  }
}

3. 自定义辅助指令标记目标元素 #

如果需要批量操作多个子元素，可创建一个辅助指令标记目标元素，再在主指令中通过ContentChildren捕获所有标记元素，扩展性更强。

示例代码

先创建辅助指令：

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

@Directive({
  selector: '[appDirectiveTarget]'
})
export class DirectiveTargetDirective {
  constructor(public el: ElementRef) {}
}

修改HTML，为目标子元素添加辅助指令标记：

<div id="someHeadWrapper" appSomeDirective>
  <div id="someSecondWrapper" appDirectiveTarget>Whatever...</div>
  <button id="someBtn" appDirectiveTarget>ClickMe</button>
</div>

主指令代码实现：

import { Directive, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { DirectiveTargetDirective } from './directive-target.directive';

@Directive({
  selector: '[appSomeDirective]'
})
export class SomeDirective implements AfterContentInit {
  @ContentChildren(DirectiveTargetDirective) targetElements: QueryList<DirectiveTargetDirective>;

  ngAfterContentInit() {
    // 遍历所有标记的目标元素并操作
    this.targetElements.forEach(target => {
      target.el.nativeElement.style.border = '1px solid blue';
    });
  }
}

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