在Angular中如何实现从父组件向子组件传递数据？

你可以通过以下两种方式实现给不同子组件传递不同标题： #

前置准备：子组件开启参数接收 #

首先确保子组件的ts文件中已经用@Input()装饰器声明接收参数：

// 子组件 cards.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-cards',
  templateUrl: './cards.component.html'
})
export class CardsComponent {
  // 接收父组件传递的message参数
  @Input() message!: string;
}

方案1：静态绑定不同值 #

直接给每个子组件的[message]属性绑定不同的内容即可，无需复用同一个message变量：

<!-- 父组件模板 -->
<div class="container">
    <div class="row">
        <div>
            <h1 class="title">Whatever</h1>
            <p class="subtitle">Nothing.</p>
        </div>
        <div class="col-sm-12">
            <div class="cardContainer">
                <!-- 直接传递不同的字符串/父组件中定义的不同变量 -->
                <app-cards [message]="'健康险'"></app-cards>
                <app-cards [message]="'旅游险'"></app-cards>
                <app-cards [message]="'意外险'"></app-cards>
                <app-cards [message]="'寿险'"></app-cards>               
            </div>
        </div>
    </div>
</div>

方案2：动态遍历渲染（更推荐） #

如果卡片数量多、后续可能调整，建议在父组件ts中定义标题数组，再用*ngFor动态渲染子组件，代码更易维护：

1. 首先在父组件ts中定义标题列表：

// 父组件 component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 定义所有子组件要显示的标题列表
  messageList = ['健康险', '旅游险', '意外险', '寿险'];
}

2. 父组件模板中遍历数组渲染子组件：

<!-- 父组件模板 -->
<div class="container">
    <div class="row">
        <div>
            <h1 class="title">Whatever</h1>
            <p class="subtitle">Nothing.</p>
        </div>
        <div class="col-sm-12">
            <div class="cardContainer">
                <!-- 遍历标题列表，给每个子组件传递对应标题 -->
                <app-cards 
                  *ngFor="let msg of messageList"
                  [message]="msg"
                ></app-cards>          
            </div>
        </div>
    </div>
</div>

两种方案都可以实现每个子组件显示不同的标题，按需选择即可。

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