Angular 7如何使用自定义指令属性获取所有子元素

Question

有人可以帮助我如何获取角度组件中具有自定义属性的所有元素吗？

我知道如何获取角度分量的列表。

@ViewChildren(CdkDropList) dropLists: QueryList<CdkDropList[]>;

但不确定如何获取具有自定义指令的元素列表。就像我的例子一样：

  <div>
    <input type="text"/>&nbsp;<i class="fa fa-info" [tooltip]="one"></i>
  </div>
  <div>
    <input type="text"/>&nbsp;<i class="fa fa-info" [tooltip]="two"></i>
  </div>
  <div>
    <input type="text"/>&nbsp;<i class="fa fa-info" [tooltip]="three"></i>
  </div>
  <div>
    <input type="text"/>&nbsp;<i class="fa fa-info" [tooltip]="four"></i>
  </div>
  <div>
    <input type="text"/>&nbsp;<i class="fa fa-info" [tooltip]="five"></i>
  </div>

这里我需要组件来获取具有[tooltip]属性的所有元素吗？

谢谢

Answer 1

我很确定您可以通过以下方式实现它：

name

编辑：获取属性的值

@Component({ /* ... */ })
export class FooComponent {
 @ViewChildren(TooltipDirective, { read: ElementRef }) inputs: QueryList<ElementRef<HTMLInputElement>>;

  ngAfterViewInit () {
    this.inputs.forEach(input => {
      console.log(input.nativeElement)
    })
  }
}

tooltip.directive.ts

@ViewChildren(TooltipDirective) inputsDirs: QueryList<TooltipDirective>;

  ngAfterViewInit () {
    this.inputsDirs.forEach(inputDir => {
      // The value of the attribute
      console.log(inputDir.tooltip)
      // The host element
      console.log(inputDir.hostElem.nativeElement)
    })
  }