Angular父组件API数据向子组件传递的@Input()实现疑问

我来帮你搞定这个父子组件传值的问题，结合你提供的代码一步步拆解：

步骤1：子组件（LocationComponent）定义@Input接收属性 #

首先，你需要在子组件里导入Input装饰器，然后声明要从父组件接收的数据字段。比如你需要接收父组件里的goodsHired、newReservedGoods这些数组，就可以这样写：

// 子组件LocationComponent的TS代码
import { Component, OnInit, Input } from '@angular/core'; // 别忘了导入Input

export class LocationComponent implements OnInit { 
  // Statut des counter.component 
  statusBienLoue = "Les biens en statut Loués"; 
  statusReservation = "Nouvelle Réservation"; 
  statusArchive = "Les biens en statut Archivés"; 
  // Status des graphic.component 
  statusChangementPrix = "Changement de prix"; 
  statutNouveauBien = "Nouveau Bien"; 
  statusNouveauBaux = "Nouveau Baux"; 

  // 定义@Input属性，接收父组件传来的数据
  @Input() goodsHired: any[] = [];
  @Input() newReservedGoods: any[] = [];
  @Input() archivedLeasedGoods: any[] = [];
  @Input() cheaperGoodsRented: any[] = [];
  // 如果你还需要其他数据，继续添加对应的@Input即可

  constructor() {} 
  ngOnInit() { 
    // 数据拿到后可以在这里做初始化处理，比如打印看看有没有接收到
    console.log('接收到的租赁数据:', this.goodsHired);
  }
}

步骤2：父组件HTML中给子组件绑定数据 #

接下来，在父组件的HTML模板里，找到<app-location>标签，把父组件里的对应数据绑定到子组件的@Input属性上：

<!-- 父组件MlsComponent的HTML代码 -->
<div class="wrapper-mls"> 
  <div class="wrapper-header"> 
    <app-header (tabEvent)="changeTab($event)"></app-header> 
  </div> 
  <div class="wrapper-filter"> 
    <app-filter-bar></app-filter-bar> 
  </div> 
  <app-vente-location *ngIf="tabNumber === 0"></app-vente-location> 
  <app-vente *ngIf="tabNumber === 1"></app-vente> 
  <!-- 给app-location绑定需要传递的数据 -->
  <app-location 
    *ngIf="tabNumber === 2"
    [goodsHired]="goodsHired"
    [newReservedGoods]="newReservedGoods"
    [archivedLeasedGoods]="archivedLeasedGoods"
    [cheaperGoodsRented]="cheaperGoodsRented"
  ></app-location> 
</div> 
<router-outlet></router-outlet>

步骤3：子组件中使用接收到的数据 #

现在子组件已经能拿到父组件的数据了，你可以在子组件的模板或者TS逻辑里使用这些数据。比如把数据传给子组件里的<app-graphic>，或者自己渲染列表：

<!-- 子组件LocationComponent的HTML代码示例 -->
<div class="row-page"> 
  <div class="container-graphic"> 
    <app-graphic 
      [statusGraphic]="statusChangementPrix" 
      [statusCounter]="statusBienLoue"
      [data]="cheaperGoodsRented" <!-- 把价格下降的租赁数据传给graphic组件 -->
    ></app-graphic> 
  </div> 
</div> 
<div class="row-page"> 
  <div class="container-graphic"> 
    <app-graphic 
      [statusGraphic]="statutNouveauBien" 
      [statusCounter]="statusReservation"
      [data]="newReservedGoods" <!-- 把新预约的数据传给graphic组件 -->
    ></app-graphic> 
  </div> 
</div> 
<div class="row-page"> 
  <div class="container-graphic"> 
    <app-graphic 
      [statusGraphic]="statusNouveauBaux" 
      [statusCounter]="statusArchive"
      [data]="archivedLeasedGoods" <!-- 把归档的租赁数据传给graphic组件 -->
    ></app-graphic> 
  </div> 
</div>

<!-- 也可以直接渲染数据列表 -->
<div class="goods-list">
  <h3>{{statusBienLoue}}</h3>
  <ul>
    <li *ngFor="let item of goodsHired">{{item.title}}</li> <!-- 假设数据里有title字段，根据实际结构调整 -->
  </ul>
</div>

注意事项 #

• 因为父组件的数据是异步获取的（通过subscribe从API获取），Angular会自动检测数据变化并更新子组件，所以不用手动处理异步加载的问题，只要数据赋值到父组件的变量上，子组件就能自动接收到最新值。
• 建议给@Input属性设置默认值（比如= []），避免数据还没加载时出现undefined的报错。
• 如果需要传递大量数据，也可以考虑把相关数据打包成一个对象，这样只需要传递一个@Input属性，代码会更简洁。

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