Angular中如何向父组件内的特定子组件传递对应自定义数据？

兄弟，你现在的问题其实很明确——你把所有子组件的weatherStatus都绑定到了父组件里的同一个weather变量上，这就导致不管你怎么改这个变量，所有子组件都会拿到一模一样的值，自然没法做到每个子组件对应不同的天气啦。

给你说个最直接也最符合Angular最佳实践的做法：让你的Items数组里的每个元素都自带对应子组件需要的天气数据，而不是用一个全局变量来统一赋值。

具体步骤如下：

1. 改造父组件的Items数组，让每个元素成为包含天气信息的对象
   先在父组件的ts文件里定义一个合适的接口，然后把每个子项的id和对应天气都放进数组里：

   // parent.ts
   // 先定义子项的类型
   interface ChildItem {
     id: number;
     weather: string;
   }
   
   Items: ChildItem[] = [
     { id: 0, weather: "sunny" },
     { id: 1, weather: "cloudy" },
     { id: 2, weather: "rainy" }
   ];
   

2. 修改父组件的模板，绑定每个子项的天气数据
   循环的时候，直接把当前item的weather属性传给子组件的weatherStatus输入，而不是绑到全局的weather变量：

   <!-- parent.html -->
   <app-parent>
     @for (item of Items; track item.id; let index = $index) {
       <app-child [id]="index" [weatherStatus]="item.weather"></app-child>
     }
   </app-parent>
   

这样一来，每个子组件都会拿到对应数组项里的天气数据，第一个子组件拿"sunny"，第二个拿"cloudy"，第三个拿"rainy"，完全不会互相影响。

而且之后如果需要动态修改某个子组件的天气，比如把第二个子组件的天气改成"windy"，你只需要修改Items数组里对应元素的weather属性就行：

// parent.ts里修改指定子项的天气
this.Items[1].weather = "windy";

Angular的变更检测会自动帮你更新对应的子组件，非常方便。

内容来源于stack exchange