ContentChildren 获取不到所有组件的解决办法

<app-content-child>
  <div class="head">
    这是头部
  <app-content-child-panel></app-content-child-panel>
  </div>
  <app-content-child-panel></app-content-child-panel>
  <app-content-child-panel></app-content-child-panel>
  <ul #list>
    <li>aaa</li>
    <li>bbb</li>
  </ul>
</app-content-child>

export class ContentChildComponent implements AfterViewInit {
  @ContentChildren(ContentChildPanelComponent) private panels: QueryList<ContentChildPanelComponent>;
  constructor() { }

  ngAfterViewInit(): void {
    console.log(this.panels); // 只有两个结果(只能获取到非div等元素包裹的结果)
  }

}

 

descendants属性

这是ContentChildren特有但属性，上个例子少拿类一个panel组件，原因是默认只寻找直属子panel 而.head里但panel组件，并非直属，所以拿不到，想要寻找到所有层级的panel组件，就开启descendants

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