Angular如何检测ng-content插槽是否传入内容？

嘿，我懂你碰到的这个坑了——直接在*ngIf里用模板变量判断ng-content有没有内容确实行不通，因为ng-content本身只是个内容投影的「占位符」，它不会自己渲染成DOM元素，所以你拿不到实际的投影内容状态。下面给你两种实用的解决办法：

方法一：用@ContentChild检测单元素投影 #

这种方法适合footer插槽里只会有单个元素的场景：

首先在你的组件类里引入必要依赖，通过@ContentChild获取投影内容的模板变量：

import { Component, ContentChild, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-form',
  templateUrl: './custom-form.component.html'
})
export class CustomFormComponent implements OnInit {
  // 通过模板变量获取footer插槽的内容容器
  @ContentChild('footerSlot') footerSlot!: ElementRef<HTMLElement>;
  hasFooterContent = false;

  ngOnInit(): void {
    // 检查容器内是否有子节点（也就是是否有投影内容）
    this.hasFooterContent = !!this.footerSlot?.nativeElement.childNodes.length;
  }
}

然后修改组件模板，给ng-content加上模板变量#footerSlot，并把*ngIf绑定到我们定义的hasFooterContent属性：

<div class="form__general">
  <ng-content select="[general]"></ng-content>
</div>
<div *ngIf="hasFooterContent" class="form__footer">
  <ng-content #footerSlot select="[footer]"></ng-content>
</div>

方法二：用@ContentChildren检测多元素/动态内容 #

如果footer插槽里可能有多个元素，或者内容会动态变化，那用@ContentChildren会更稳妥：

组件类代码如下：

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

@Component({
  selector: 'app-custom-form',
  templateUrl: './custom-form.component.html'
})
export class CustomFormComponent implements AfterContentInit {
  // 获取footer插槽下所有的子元素
  @ContentChildren('footerSlot', { descendants: true }) footerElements!: QueryList<ElementRef>;
  hasFooterContent = false;

  ngAfterContentInit(): void {
    // 初始化时检查是否有内容
    this.updateFooterContentStatus();
    // 监听内容变化，动态更新状态
    this.footerElements.changes.subscribe(() => {
      this.updateFooterContentStatus();
    });
  }

  private updateFooterContentStatus(): void {
    this.hasFooterContent = this.footerElements.length > 0;
  }
}

模板和方法一一致，只需要给ng-content加上#footerSlot模板变量即可。

为什么你之前的写法无效？ #

你之前用<div *ngIf="#footer" ...>的写法，本质上是给ng-content这个占位符加了模板变量，但Angular在渲染时会把ng-content替换成投影的内容，这个占位符本身不会留在DOM里，所以你根本拿不到有效的footer变量来判断内容是否存在。

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