Angular中如何在组件内包裹内容（非Input参数方式）

在Angular里，对应React Children的功能叫内容投影（Content Projection），用<ng-content>标签实现，你之前的写法有误，正确实现默认内容+外部传入内容的方式如下：

1. 修正组件模板（app-mycomp.component.html） #

把默认内容和<ng-content>分开，通过判断是否有外部投影内容来决定显示默认内容：

<!-- 外部传入的内容会投影到这里 -->
<ng-content #projectedContent></ng-content>

<!-- 当没有外部内容时，显示默认内容 -->
<ng-container *ngIf="!hasProjectedContent">
  <mat-icon fontIcon="icon"></mat-icon>
  <mat-label>默认分配消息</mat-label>
</ng-container>

2. 组件类添加内容检测逻辑（app-mycomp.component.ts） #

通过@ContentChild检测是否有外部投影内容：

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

@Component({
  selector: 'app-mycomp',
  templateUrl: './mycomp.component.html',
  styleUrls: ['./mycomp.component.css']
})
export class MycompComponent implements AfterContentInit {
  hasProjectedContent = false;

  // 获取投影内容的元素引用
  @ContentChild('projectedContent', { read: ElementRef }) projectedContent?: ElementRef;

  ngAfterContentInit(): void {
    // 检查是否有实际的投影内容（排除空白节点）
    if (this.projectedContent) {
      const childNodes = Array.from(this.projectedContent.nativeElement.childNodes);
      this.hasProjectedContent = childNodes.some(node => 
        node.nodeType === Node.TEXT_NODE && node.textContent?.trim() || 
        node.nodeType === Node.ELEMENT_NODE
      );
    }
  }
}

3. 主组件调用方式 #

直接在组件标签内传入内容即可，和你示例里的写法一致：

<!-- 传入自定义内容 -->
<app-mycomp>This is my message to allocate</app-mycomp>

<!-- 不传入内容，显示默认值 -->
<app-mycomp></app-mycomp>

关键说明 #

• <ng-content>是Angular的内容投影占位符，外部组件传入的内容会替换这个标签的位置，不要把默认内容写在<ng-content>内部，内部内容不会被渲染。
• 通过@ContentChild和AfterContentInit生命周期钩子，可以检测是否有有效的外部投影内容，从而控制默认内容的显示。

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