angular - @Input()在Angular中有什么用？

我正在学习angular.io上的Create a feature component教程，然后注意到@Input装饰器属性:

// src/app/hero-detail/hero-detail.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styleUrls: ['./hero-detail.component.css']
})
export class HeroDetailComponent implements OnInit {
  @Input() hero: Hero;

  constructor() { }
  ngOnInit() { }
}

什么是@Input()，它的作用是什么？

最佳答案

在此示例中，hero-detail是子组件，它应插入具有“hero”数据的父组件中，并且“hero”数据将通过hero实例变量传递到hero-detail组件中@Input装饰器将其标记为输入。

基本上语法是:

从hero.interface.ts文件导入Hero接口(interface)，这是Hero类的定义

import { Hero } from "./hero";

使用Input装饰器使以下实例变量可用于父组件以向下传递数据。

@Input()

hero实例变量本身，类型为Hero，其接口(interface)在上面导入:

hero: Hero;

父组件将使用此hero-detail子组件，并将hero数据通过将其插入html模板中来传递给它，如下所示:

<hero-detail [hero]="hero"></hero-detail>

上级组件具有一个名为“hero”的实例变量，该实例变量包含数据，并将其传递到hero-detail组件中。

关于angular - @Input()在Angular中有什么用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45749533/