Angular7 如何获取所有具有自定义指令属性的子元素

Question

任何人都可以帮助我如何在 angular 组件中获取具有自定义属性的所有元素？

我知道如何获取 angular 个组件的列表，即

@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

我很确定你可以通过这种方式实现它：

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

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

编辑：获取属性值

@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)
    })
  }

tooltip.directive.ts

constructor (public hostElem: ElementRef<HTMLInputElement>) { }

Angular7 如何获取所有具有自定义指令属性的子元素

Angular 7 how to get all child elements with custom directive attribtues

angular-directive

angular

编辑：获取属性值

tooltip.directive.ts