Angular 组件间数据传递：使用 @Input 装饰器-js教程-PHP中文网

Angular 组件间数据传递：使用 @Input 装饰器

花韻仙語

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

原创

290人浏览过

angular 组件间数据传递：使用 @input 装饰器

本文详细介绍了 Angular 中父组件向子组件传递数据的常用方法，重点讲解了如何使用 @Input 装饰器实现数据绑定。通过示例代码，读者可以清晰地理解如何定义输入属性，以及如何在子组件中访问和使用父组件传递的数据，并避免常见错误。

在 Angular 应用开发中，组件化是一种常见的架构模式。组件之间经常需要进行数据传递。本文将重点介绍如何使用 @Input 装饰器，将数据从父组件传递到子组件。

使用 @Input 装饰器

@Input 装饰器允许子组件接收来自父组件的数据。要使用它，需要在子组件的类中声明一个带有 @Input 装饰器的属性。

示例：

假设我们有一个 AppComponent 作为父组件，它包含一个 images 数组，我们希望将 images 数组中的每个 image 对象传递给 CardComponent 子组件。

父组件 (AppComponent):

美间AI

美间AI：让设计更简单

查看详情

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

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

  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',
    },
  ];
}

登录后复制

<!-- App component template -->
<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>

登录后复制

在父组件的模板中，我们使用 *ngFor 循环遍历 images 数组，并将每个 image 对象通过 [image]="image" 绑定到 app-card 组件的 image 属性上。

子组件 (CardComponent):

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);
  }
}

登录后复制

<!-- card component template-->
<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>

登录后复制

在子组件的类中，我们使用 @Input() image: any = {} 声明了一个名为 image 的输入属性。@Input() 装饰器告诉 Angular，这个属性可以从父组件接收数据。 image: any = {} 定义了 image 属性的类型为 any，并设置了一个默认值 {}，这可以避免在数据加载完成之前出现错误。

在子组件的模板中，我们可以使用 image.url 和 image.title 来访问父组件传递过来的 image 对象的属性。使用 *ngIf="image" 可以确保在 image 对象存在时才渲染 card 组件，避免在数据加载完成之前出现错误。

注意事项

类型定义： 建议为 @Input 属性定义明确的类型，以提高代码的可读性和可维护性。
默认值： 可以为 @Input 属性设置默认值，以避免在父组件没有传递数据时出现错误。
别名： 可以为 @Input 属性设置别名，例如 @Input('image') cardImage: any，这样在父组件的模板中可以使用 [image]="image"，而在子组件的类中使用 this.cardImage。