angular ContentChild ContentChildren-CSDN博客

本文链接：https://blog.csdn.net/yanyi24/article/details/113930171

本文详细讲解了Angular中的ContentChild与ContentChildren装饰器，它们用于查询ng-content中的组件、元素，并介绍了selector、read和descendants元数据的使用。重点展示了如何获取普通DOM和组件，以及descendants属性对获取子组件的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ContentChild与ContentChildren跟我们上一节介绍的ViewChild与ViewChildren用法几乎一致。他们都是装饰器，但是区别在于，前者是获取投影（ng-content）中的组件、元素等。（原文阅读）

@ContentChild()

ContentChild的元数据跟ViewChild一样，也是有下面三个：

selector- 用于查询的指令类型或名字。
read- 从查询到的元素中读取另一个令牌。
static- 如果为true，则在更改检测之前解析查询结果；如果为false，则在更改检测之后解析查询结果。默认为false。

获取普通DOM

默认你已经了解<ng-content>的用法：

<!-- content-child.component.html -->
<div class="content-child-box">
  <h2>这是content child组件</h2>
  <div class="head" style="border: 1px solid; margin: 10px 0;">
    <ng-content select=".head"></ng-content>
  </div>
  <ng-content></ng-content>
</div>

父组件传入内容：

<!-- app.component.html -->
<app-content-child>
  <p class="head">传入的头部</p>
  <p #other>其他内容</p>
</app-content-child>

获取元素：

// content-child.component.ts
...
export class ContentChildComponent implements OnInit, AfterViewInit {
  // 这样是获取不到元素的
  @ContentChild('.head', {static: true}) private headEl: ElementRef<HTMLSpanElement>;
  @ContentChild('other', {static: true}) private otherEl: ElementRef<HTMLDivElement>;
  constructor() { }
  ngOnInit(): void {}
  ngAfterViewInit(): void {
    console.log(this.headEl); // undefined
    console.log(this.otherEl.nativeElement); // <div _ngcontent-teu-c17="">其他内容</div>
  }
}

上面获取元素的方式有个特别注意的地方：ContentChild的selector参数不能是css的类选择器以及标签选择器！

获取组件就不介绍了吧，如不熟悉，参阅上一节

@ContentChildren()

三个元数据介绍：

selector- 用于查询的指令类型或名字。
descendants- 如果为true，则包括所有后代，否则仅包括直接子代，默认false。
read- 用于从查询的元素中读取不同的标记。

用法类似ViewChildren, 批量获取投影中到组件或指令。

先创建一个子组件：

ng g c components/content-child/content-child-panel -s

修改content-child组件：

<!-- content-child.component.html -->
<div class="content-child-box">
  <h2>这是content child组件</h2>
  <ng-content></ng-content>
</div>

传入三个content-child-panel组件：

<!-- app.component.html -->
<app-content-child>
  <app-content-child-panel></app-content-child-panel>
  <app-content-child-panel></app-content-child-panel>
  <div class="foot">
    <app-content-child-panel></app-content-child-panel>
  </div>
</app-content-child>

获取组件：

// content-child.component.ts
...
export class ContentChildComponent implements OnInit, AfterViewInit {
  @ContentChildren(ContentChildPanelComponent) private panels: QueryList<ContentChildPanelComponent>;
  constructor() { }
  ngOnInit(): void {}
  ngAfterViewInit(): void {
    console.log(this.panels);
  }
}

浏览器日志：

在这里插入图片描述

从上面的结果可以看出：页面上显示了三个子组件，但是我们获取到的组件只有前两个，因为元数据中descendants默认为false。

想要获取所有子组件，请开启descendants：

@ContentChildren(ContentChildPanelComponent, {descendants: true}) private panels: QueryList<ContentChildPanelComponent>;

总结

ContentChild与ContentChildren是获取投影中的组件、指令及元素DOM等；
ContentChildren开启descendants才能获得所有子组件。

欢迎关注我的公众号，公众号将第一时间更新angular教程：
在这里插入图片描述