Angular中如何查询ng-content内部的按钮元素

问题分析 #

你当前的ItemDirective绑定在包裹ng-content的<div>上，所以ViewChildren(ItemDirective)只能获取到这个div的指令实例，而非投影进来的按钮。要拿到按钮的QueryList，有两种可行方案：

方案一：直接查询button元素（无需修改指令） #

利用Angular的查询器直接定位<button>元素，添加{ descendants: true }选项来包含投影内容中的后代元素：

组件TS代码修改：

import { Component, QueryList, ViewChildren, ElementRef } from '@angular/core';

@Component({
  // 组件元数据
})
export class SelectComponent {
  // 直接查询所有button元素，包含投影内容里的后代
  @ViewChildren('button', { descendants: true }) buttons: QueryList<ElementRef<HTMLButtonElement>>;

  ngAfterViewInit(): void {
    console.log(this.buttons); // 现在会返回所有投影的按钮元素
  }
}

如果想用ContentChildren，同样需要开启descendants选项，适合在ngAfterContentInit中访问：

@ContentChildren('button', { descendants: true }) buttons: QueryList<ElementRef<HTMLButtonElement>>;

ngAfterContentInit(): void {
  console.log(this.buttons);
}

方案二：将指令绑定到按钮上（更灵活的指令复用） #

把appItem指令直接应用到投影的按钮上，而非外层div，这样就能通过指令实例查询到所有按钮：

父组件（使用Select组件的地方）的HTML修改：

<app-select>
  <button appItem>按钮1</button>
  <button appItem>按钮2</button>
</app-select>

Select组件的HTML修改：

<div>
  <ng-content></ng-content>
</div>

Select组件的TS代码保持（此时查询的是按钮上的指令）：

import { Component, QueryList, ViewChildren } from '@angular/core';
import { ItemDirective } from './directives/item.directive';

@Component({
  // 组件元数据
})
export class SelectComponent {
  @ViewChildren(ItemDirective) buttons: QueryList<ItemDirective>;

  ngAfterViewInit(): void {
    console.log(this.buttons); // 现在返回所有带appItem指令的按钮实例
  }
}

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