如何在Angular 17+代码中动态获取元素上的属性指令实例

针对动态数量的div元素，无需手动维护指令实例列表，有两种可靠方案：

方案一：将指令实例挂载到宿主元素 #

在指令内部把自身实例绑定到宿主元素的自定义属性上，点击时直接从元素上获取：

1. 修改BoardResizeDirective指令：

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

@Directive({
  selector: '[appBoardResize]',
  standalone: true // 若使用独立组件/指令需添加
})
export class BoardResizeDirective {
  constructor(private el: ElementRef<HTMLElement>) {
    // 将指令实例挂载到宿主元素的自定义属性
    el.nativeElement.__resizeDirective = this;
  }

  // 示例指令方法
  resize() {
    console.log('执行元素调整逻辑');
  }
}

2. 扩展HTMLElement类型（可选，解决TS类型提示问题）：
   在项目根目录的types.d.ts文件中添加：

import { BoardResizeDirective } from './path/to/board-resize.directive';

interface HTMLElement {
  __resizeDirective?: BoardResizeDirective;
}

3. 组件中点击事件处理：

func(event: MouseEvent) {
  const target = event.target as HTMLElement;
  const directive = target.__resizeDirective;
  if (directive) {
    // 调用指令方法或访问属性
    directive.resize();
  }
}

方案二：使用@ViewChildren自动维护指令列表 #

利用Angular的@ViewChildren查询所有指令实例，点击时通过元素匹配找到对应指令：

1. 修改BoardResizeDirective指令，暴露宿主元素引用：

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

@Directive({
  selector: '[appBoardResize]',
  standalone: true
})
export class BoardResizeDirective {
  // 公开ElementRef供组件访问
  constructor(public el: ElementRef<HTMLElement>) {}

  resize() {
    console.log('执行元素调整逻辑');
  }
}

2. 组件中查询指令并处理点击：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { BoardResizeDirective } from './board-resize.directive';

@Component({
  selector: 'app-root',
  template: `
    <div class="item" (click)="func($event)" appBoardResize></div>
    <div class="item" (click)="func($event)" appBoardResize></div>
  `
})
export class AppComponent {
  // 自动获取所有appBoardResize指令实例
  @ViewChildren(BoardResizeDirective) resizeDirectives!: QueryList<BoardResizeDirective>;

  func(event: MouseEvent) {
    const target = event.target as HTMLElement;
    // 匹配元素对应的指令实例
    const directive = this.resizeDirectives.find(dir => dir.el.nativeElement === target);
    if (directive) {
      directive.resize();
    }
  }
}

两种方案对比：

• 方案一更直接，无需依赖Angular的查询API，性能略优，适合动态生成元素场景；
• 方案二更符合Angular的官方实践，类型安全，无需自定义元素属性。

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