Angular 组件间数据传递：使用 @Input() 实现父子组件通信-js教程-PHP中文网

Angular 组件间数据传递：使用 @Input() 实现父子组件通信

聖光之護

发布： 2025-10-03 12:31:25

原创

1024人浏览过

angular 组件间数据传递：使用 @input() 实现父子组件通信

本文旨在讲解如何在 Angular 应用中，使用 @Input() 装饰器实现父组件向子组件传递数据。通过一个图片展示的例子，详细介绍了如何定义输入属性，如何在父组件中传递数据，以及如何在子组件中使用这些数据，并提供了一些最佳实践建议，帮助开发者构建更健壮的 Angular 应用。

使用 @Input() 传递数据

在 Angular 中，父组件向子组件传递数据最常用的方式是使用 @Input() 装饰器。@Input() 允许子组件接收来自父组件的数据。

1. 在子组件中定义输入属性

首先，需要在子组件中定义一个使用 @Input() 装饰器标记的属性。这个属性将接收来自父组件的数据。

在 card.component.ts 中，我们定义一个名为 image 的输入属性：

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

@Component({
  selector: 'app-card',
  templateUrl: './card.component.html',
  styleUrls: ['./card.component.css'],
})
export class CardComponent implements OnInit {
  @Input() image: any = {};

  constructor() {}

  ngOnInit(): void {
    console.log(this.image);
  }
}

登录后复制

在这个例子中，@Input() image: any = {} 表示 CardComponent 接收一个名为 image 的输入属性，类型为 any，并初始化为一个空对象。建议根据实际情况指定更具体的类型，例如接口或类，以提高代码的可读性和可维护性。

2. 在父组件的模板中传递数据

接下来，在父组件的模板中，使用属性绑定将数据传递给子组件。

在 app.component.html 中，我们将 images 数组中的每个 image 对象传递给 app-card 组件：

腾讯智影-AI数字人

基于AI数字人能力，实现7*24小时AI数字人直播带货，低成本实现直播业务快速增增，全天智能在线直播

查看详情

<app-nav></app-nav>
<div class="container">
  <div class="columns mt-5 is-8 is-variable is-flex-wrap-wrap">
    <div class="column is-4-tablet is-3-desktop" *ngFor="let image of images">
      <app-card [image]="image"></app-card>
    </div>
  </div>
</div>

登录后复制

注意 [image]="image" 这部分代码。方括号 [] 表示属性绑定，它将父组件中的 image 变量的值传递给子组件 app-card 的 image 输入属性。

3. 在子组件中使用接收到的数据

现在，子组件就可以使用通过 @Input() 接收到的数据了。

在 card.component.html 中，我们使用 image.url 来显示图片，并使用 image.title 显示标题：

<div *ngIf="image" class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img [src]="image.url" [alt]="image.title" />
    </figure>
  </div>
  <div class="card-content">
    <p class="title is-4">{{ image.title }}</p>
  </div>
  <footer class="card-footer">
    <p class="card-footer-item">
      <span>
        View on
        <a href="https://twitter.com/codinghorror/status/506010907021828096"
          >Twitter</a
        >
      </span>
    </p>
    <p class="card-footer-item">
      <span> Share on <a href="#">Facebook</a> </span>
    </p>
  </footer>
</div>

登录后复制

需要注意的是，为了避免在 image 属性加载完成之前出现错误，我们使用了 *ngIf="image" 指令。这确保了只有当 image 属性存在时，才会渲染 card 组件的内容。

4. AppComponent数据

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'shopping-cart';

  ngOnInit() {}

  images = [
    {
      title: 'At the beach',
      url:
        'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
    },
    {
      title: 'At the forest',
      url:
        'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHx8fHx8&auto=format&fit=crop&w=1170&q=80',
    },
    {
      title: 'At the City',
      url:
        'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    },
    {
      title: 'At the Snow',
      url:
        'https://images.unsplash.com/photo-1517299321609-52687d1bc55a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    },
    {
      title: 'At the beach',
      url:
        'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
    },
    {
      title: 'At the forest',
      url:
        'https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    },
    {
      title: 'At the City',
      url:
        'https://images.unsplash.com/photo-1449824913935-59a10b8d2000?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    },
    {
      title: 'At the Snow',
      url:
        'https://images.unsplash.com/photo-1517299321609-52687d1bc55a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80',
    },
  ];
}

登录后复制

最佳实践

明确数据类型： 尽量为 @Input() 属性指定明确的数据类型，例如接口或类。这有助于提高代码的可读性和可维护性，并减少运行时错误。
*使用 `ngIf进行条件渲染：** 在子组件中使用@Input()接收到的数据之前，可以使用*ngIf` 指令进行条件渲染，以避免在数据加载完成之前出现错误。
使用别名： 可以使用 @Input('aliasName') propertyName: type; 语法为输入属性定义别名。这在某些情况下可以提高代码的可读性。