@Input()的作用是什么? [英] What is @Input() used for?

问题描述

我决定学习Angular 4，并按照 https://angular.io/tutorial/toh上的教程进行操作-pt3 但是，又出现了一个问题. 这是什么

I decided to learn Angular 4 and follow the tutorial at https://angular.io/tutorial/toh-pt3 But, once again, the question arose. What is this

@Input () hero: Hero; 

它是做什么用的? 它有什么作用? 是什么意思?

What is it for? What does it do? What does it mean?

这是代码. Hero-details.component.ts

Here is the code. Hero-details.component.ts

import { Component, Input } from '@angular/core';
import { Hero } from "./hero";


@Component({
 selector: 'hero-detail',
 templateUrl: './hero-detail.component.html'
})
export class HeroDetailComponent {
 @Input() hero: Hero;
}

此处是文件app.components.ts，app.components.html，hero-details.components.html

请说明是否有人可以

推荐答案

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

In this example, hero-detail is a child component, it's meant to be inserted into a parent component which will have the 'hero' data, and that 'hero' data will be passed into the hero-detail component via the hero instance variable marked as an input by the @Input decorator.

基本上语法是:

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

Import the Hero interface from the hero.interface.ts file, this is the definition of the Hero class

import { Hero } from "./hero";

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

Use an Input decorator to make the following instance variable available to parent components to pass data down.

@Input()

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

The hero instance variable itself, which is of type Hero, the interface of which was imported above:

hero: Hero;

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

A parent component would use this hero-detail child component and pass the hero data into it by inserting it into the html template like this:

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

父组件的实例变量名为"hero"，其中包含数据，并已传递到hero-detail组件中.

Where the parent component has an instance variable named 'hero', which contains the data, and that's passed into the hero-detail component.

这篇关于@Input()的作用是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！