Angular 2+子组件检测传入内容并保留父组件作用域

嘿，这个需求在Angular开发里太常见了，我来一步步给你拆解实现方法，完美覆盖你提到的所有点～

1. 核心：判断是否传入内容，显示默认值 #

Angular的<ng-content>是内容投影的基础，但它本身没法直接判断有没有内容传入，我们可以用@ContentChild来检测投影内容的存在，然后控制默认内容的显示。

子组件代码 #

先写子组件的模板和逻辑：

<!-- child.component.html -->
<div class="content-wrapper">
  <!-- 用来接收父组件传入的内容 -->
  <ng-content></ng-content>
  
  <!-- 当没有传入内容时，显示这段默认内容 -->
  <div *ngIf="!hasProjectedContent" class="default-content">
    📢 这是子组件的默认内容哦
  </div>
</div>

// child.component.ts
import { Component, ContentChild, ElementRef, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class CustomChildComponent implements OnInit {
  // 标记是否有父组件传入的内容
  hasProjectedContent = false;

  // 通过ContentChild获取投影内容的容器（注意父组件要给投影内容加#projected标记）
  @ContentChild('projected', { static: true }) projectedContent?: ElementRef;

  ngOnInit(): void {
    // 检查投影内容的元素是否有子节点，判断是否有内容传入
    if (this.projectedContent?.nativeElement.children.length > 0) {
      this.hasProjectedContent = true;
    }
  }
}

2. 父组件使用：传入内容+自动继承父作用域 #

重点来了：Angular的内容投影天生就用的是父组件的作用域，所以你传入的内容直接就能访问父组件的变量、方法，完全不用额外配置！

父组件代码 #

// parent.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  // 父组件的变量，投影内容可以直接用
  parentMsg = '我是父组件的消息';

  // 父组件的方法，投影内容也能直接调用
  showParentAlert() {
    alert('触发了父组件的方法！');
  }
}

<!-- parent.component.html -->
<!-- 情况1：传入自定义内容，自动继承父作用域 -->
<app-custom-child>
  <div #projected>
    <p>父组件的消息：{{ parentMsg }}</p>
    <button (click)="showParentAlert()">点我调用父组件方法</button>
  </div>
</app-custom-child>

<!-- 情况2：不传入内容，子组件显示默认值 -->
<app-custom-child></app-custom-child>

进阶：多区域内容投影（可选） #

如果你的子组件需要多个投影区域（比如头部、主体、底部），可以给<ng-content>加select属性，然后分别判断每个区域是否有内容：

<!-- child.component.html -->
<div class="header">
  <ng-content select="[header]"></ng-content>
  <div *ngIf="!hasHeader">默认头部内容</div>
</div>
<div class="body">
  <ng-content select="[body]"></ng-content>
  <div *ngIf="!hasBody">默认主体内容</div>
</div>

然后在TS里用@ContentChild分别检测每个区域的内容即可，逻辑和上面一致。

小提示 #

• 如果投影的内容是动态生成的（比如用*ngIf控制显示隐藏），建议把判断逻辑放到ngAfterContentInit生命周期里，确保内容已经渲染完成后再检测。
• @ContentChild的static属性：在ngOnInit里用就设为true，在ngAfterContentInit里用设为false也没问题。

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