Angular中如何不使用路由和服务将父组件数据传到子组件内嵌套的组件

解决方法 #

不用路由和服务的话，有两种非常实用的实现方案：

方案1：@Input 属性逐层透传

适合嵌套层级少的场景，逻辑最直观不需要额外API：

1. 先在父组件定义要传递的数据，给子组件绑定输入属性

// parent.component.ts
export class ParentComponent {
  // 要传递给孙组件的数据
  public sendToGrandson = { id: 1, content: "测试数据" };
}

<!-- parent.component.html -->
<div class="container">
  <!-- 给中间的子组件绑定输入属性 -->
  <app-child [tempData]="sendToGrandson"></app-child>
  <app-childTwo></app-childTwo>
</div>

2. 中间子组件接收父组件传的属性，再转发给内部的孙组件

// child.component.ts
import { Input } from '@angular/core';
export class ChildComponent {
  // 接收父组件传的临时数据
  @Input() tempData: any;
}

<!-- child.component.html -->
<div class="container">
  <!-- 把接收的数据再绑定给孙组件 -->
  <app-child-one [targetData]="tempData"></app-child-one>
</div>

3. 孙组件直接接收最终数据使用即可

// child-one.component.ts
import { Input } from '@angular/core';
export class ChildOneComponent {
  // 拿到父组件传递的最终数据
  @Input() targetData: any;
}

方案2：内容投影（ng-content）

适合嵌套层级多的场景，不需要给每层中间组件加@Input，更省力：

1. 父组件直接把孙组件写到子组件的标签内部，直接给孙组件绑定数据

<!-- parent.component.html -->
<div class="container">
  <app-child>
    <!-- 直接在父层给孙组件绑定要传的属性 -->
    <app-child-one [targetData]="sendToGrandson"></app-child-one>
  </app-child>
  <app-childTwo></app-childTwo>
</div>

2. 中间子组件只需要加ng-content占位符承接父组件传入的内容，不需要改ts文件

<!-- child.component.html -->
<div class="container">
  <ng-content></ng-content>
</div>

3. 孙组件正常定义@Input接收数据即可，和方案1最后一步完全一致。

如果你的项目用的是Angular 16+版本，还可以给@Input加required校验，避免漏传数据的问题：@Input({ required: true }) targetData: YourDataType;

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