Angular子组件定义占位符及父子组件嵌套传值问题

核心思路 #

通过Angular内容投影（ng-content）在child-component1中定义占位符，结合@Input()装饰器将循环中的car对象传递给child-component2；也可以利用模板上下文实现更灵活的传参逻辑。

方案一：基础内容投影+直接传参 #

1. 改造child-component1 #

给child-component1添加输入属性接收父组件的car对象，同时在模板中定义内容投影区域：

child-component1.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-component1',
  templateUrl: './child-component1.component.html'
})
export class ChildComponent1Component {
  @Input() car: any; // 接收父组件循环传递的car对象
}

child-component1.component.html

<!-- child-component1自身内容 -->
<div class="child1-wrap">
  <!-- 内容投影占位符，用来承载child-component2 -->
  <ng-content></ng-content>
</div>

2. 父组件中传递数据并嵌套组件 #

在父组件的*ngFor循环里，把car传给child-component1，同时直接在投影内容里给child-component2绑定car：

父组件模板

<parent-component>
  <child-component1 *ngFor="let car of cars" [car]="car">
    <!-- 直接将循环的car绑定给child-component2 -->
    <child-component2 [car]="car"></child-component2>
  </child-component1>
</parent-component>

3. 改造child-component2接收数据 #

给child-component2添加输入属性接收car：

child-component2.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-component2',
  templateUrl: './child-component2.component.html'
})
export class ChildComponent2Component {
  @Input() car: any; // 接收传递过来的car对象
}

方案二：模板上下文传参（更灵活） #

如果需要在child-component1内部控制投影内容的上下文，可以用ngTemplateOutlet实现：

1. 改造child-component1 #

通过@ContentChild获取父组件传入的模板，再用ngTemplateOutlet传递car上下文：

child-component1.component.ts

import { Component, Input, TemplateRef, ContentChild } from '@angular/core';

@Component({
  selector: 'child-component1',
  templateUrl: './child-component1.component.html'
})
export class ChildComponent1Component {
  @Input() car: any;
  @ContentChild(TemplateRef) contentTemplate!: TemplateRef<any>; // 获取父组件传入的模板
}

child-component1.component.html

<div class="child1-wrap">
  <!-- 通过ngTemplateOutlet传递car作为上下文 -->
  <ng-container *ngTemplateOutlet="contentTemplate; context: { $implicit: car }"></ng-container>
</div>

2. 父组件中使用模板传递内容 #

用<ng-template>包裹child-component2，通过模板变量接收car：

父组件模板

<parent-component>
  <child-component1 *ngFor="let car of cars" [car]="car">
    <ng-template let-car>
      <child-component2 [car]="car"></child-component2>
    </ng-template>
  </child-component1>
</parent-component>

3. child-component2接收数据 #

和方案一一致，添加@Input() car: any;即可。

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