Angular 组件间数据传递：使用 @Input() 详解-js教程-PHP中文网

Angular 组件间数据传递：使用 @Input() 详解

花韻仙語

发布： 2025-10-03 11:13:01

原创

589人浏览过

angular 组件间数据传递：使用 @input() 详解

本文详细讲解了 Angular 中父组件向子组件传递数据的常用方法——@Input() 装饰器。通过一个图片展示的示例，我们将学习如何在父组件中定义数据，并将其传递到子组件中进行展示，同时避免一些常见的错误，确保数据正确加载和显示。

使用 @Input() 进行数据传递

在 Angular 应用中，组件化是核心概念之一。组件之间经常需要进行数据交互，其中一个常见场景就是父组件向子组件传递数据。@Input() 装饰器是实现这一功能的关键。

示例：图片展示组件

假设我们有一个父组件 AppComponent，它包含一个图片列表 images。我们希望将这些图片数据传递给子组件 CardComponent，并在子组件中展示这些图片。

1. 父组件 (AppComponent)

首先，在 AppComponent 中定义 images 数组：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  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=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=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&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',
    },
  ];
}

登录后复制

接下来，在 AppComponent 的模板文件中，使用 *ngFor 循环遍历 images 数组，并将每个 image 对象传递给 CardComponent：

<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 输入属性上。

美间AI

美间AI：让设计更简单

查看详情

2. 子组件 (CardComponent)

在 CardComponent 中，使用 @Input() 装饰器声明一个输入属性 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 = {} 声明了一个名为 image 的输入属性，类型为 any，并设置了一个默认值空对象 {}。建议明确指定类型，例如 Image 接口，提高代码可读性和可维护性。

最后，在 CardComponent 的模板文件中，使用 image 属性来展示图片：

<div *ngIf="image" class="card">
  <div class="card-image">
    <figure class="image is-4by3">
      <img [src]="image.url" [alt]="image.title" />
    </figure>
  </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.title }}</div>
</div>

登录后复制

关键点：