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

Angular 7中，要获取具有自定义指令属性的所有子元素，可以使用@ContentChildren装饰器和QueryList类来实现。

首先，需要在自定义指令中定义一个属性，用于标记子元素。例如，假设我们有一个名为CustomDirective的自定义指令，可以在指令中定义一个属性@ContentChildren('customElement') customElements: QueryList<ElementRef>;。

然后，在父组件或父指令中，可以使用@ViewChild或@ContentChild装饰器来获取包含自定义指令的父元素或父指令。例如，假设我们有一个名为ParentComponent的父组件，可以在组件中定义一个属性@ContentChildren(CustomDirective) customDirectives: QueryList<CustomDirective>;。

接下来，在父组件或父指令的ngAfterContentInit生命周期钩子函数中，可以订阅customDirectives的changes事件，并在回调函数中获取具有自定义指令属性的所有子元素。例如：

import { Component, ContentChildren, QueryList, AfterContentInit, ElementRef } from '@angular/core';
import { CustomDirective } from './custom.directive';

@Component({
  selector: 'app-parent',
  template: `
    <div customElement></div>
    <div customElement></div>
    <div customElement></div>
  `
})
export class ParentComponent implements AfterContentInit {
  @ContentChildren(CustomDirective) customDirectives: QueryList<CustomDirective>;

  ngAfterContentInit() {
    this.customDirectives.changes.subscribe(() => {
      const customElements = this.customDirectives.toArray().map(directive => directive.customElements);
      console.log(customElements);
    });
  }
}

在上面的例子中，我们定义了一个ParentComponent父组件，并在模板中使用了三个具有自定义指令属性的子元素。在ngAfterContentInit生命周期钩子函数中，我们订阅了customDirectives的changes事件，并在回调函数中通过toArray()方法将QueryList转换为数组，然后使用map()方法获取每个自定义指令的customElements属性，最后打印输出结果。

需要注意的是，@ContentChildren装饰器用于获取父组件或父指令中包含的子元素，而@ViewChild装饰器用于获取父组件或父指令中的单个子元素。另外，QueryList类是Angular提供的一个集合类，用于管理查询结果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。

• 腾讯云云服务器（CVM）：腾讯云提供的弹性计算服务，可快速创建和管理云服务器实例，支持多种操作系统和实例规格，具有高性能、高可靠性和高可扩展性。了解更多信息，请访问腾讯云云服务器（CVM）产品介绍。
• 腾讯云云数据库MySQL：腾讯云提供的关系型数据库服务，基于MySQL架构，具有高可用、高性能和高安全性的特点，支持自动备份、容灾和监控等功能。了解更多信息，请访问腾讯云云数据库MySQL产品介绍。