如何捕获任意投影？如何检测投影并实现无类型限制的投影观测？

1. 如何捕获任意投影？ #

在Angular中，要捕获所有投影到组件内的内容（包括原生元素、Angular组件等任意类型），可以使用@ContentChildren装饰器搭配通配符选择器'*'，同时设置descendants: true参数来包含嵌套的投影元素：

import { Component, ContentChildren, QueryList, ElementRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="projection-container">
      <ng-content></ng-content>
    </div>
    <p>捕获到的投影元素数量: {{ projections.length }}</p>
  `
})
export class MyComponent {
  @ContentChildren('*', { descendants: true }) projections!: QueryList<ElementRef>;
}

这个方式会获取所有投影进来的元素引用，不管其类型或嵌套层级。

2. 若需判断是否提供了投影，该如何实现？ #

基于上述捕获到的QueryList，可以通过其length属性判断是否存在投影内容。由于QueryList是异步更新的，建议在ngAfterContentInit钩子中初始化状态，并监听changes observable来响应投影内容的动态变化：

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

@Component({
  selector: 'app-my-component',
  template: `
    <div class="projection-container">
      <ng-content></ng-content>
    </div>
    <p>是否存在投影: {{ hasProjection ? '是' : '否' }}</p>
  `
})
export class MyComponent implements AfterContentInit {
  @ContentChildren('*', { descendants: true }) projections!: QueryList<ElementRef>;
  hasProjection = false;

  ngAfterContentInit(): void {
    this.updateProjectionStatus();
    // 监听投影内容的变化
    this.projections.changes.subscribe(() => this.updateProjectionStatus());
  }

  private updateProjectionStatus(): void {
    this.hasProjection = this.projections.length > 0;
  }
}

如果只是简单场景，也可以直接在模板中使用projections.length > 0判断，但要注意组件初始化阶段的异步问题。

3. 是否存在合适的方法，可无视类型观测所有投影？ #

有的，你可以通过@ContentChildren搭配通配符选择器，直接用QueryList<any>来接收所有类型的投影内容（原生元素、组件、指令等），实现无视类型的观测：

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <div class="projection-container">
      <ng-content></ng-content>
    </div>
  `
})
export class MyComponent implements AfterContentInit {
  @ContentChildren('*', { descendants: true }) allProjections!: QueryList<any>;

  ngAfterContentInit(): void {
    // 观测投影内容的动态变化
    this.allProjections.changes.subscribe((updatedList) => {
      console.log('投影内容已更新:', updatedList);
    });
  }
}

这种方式不需要关心投影内容的具体类型，只要是投影到组件内的内容都会被捕获并可观测其变化。

内容的提问来源于stack exchange，提问作者constantant