Question

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

@Input () hero: 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;
}

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

的另一个代码

如果有人可以

请解释

Answer 1

在这个例子中，hero-detail是一个子组件，它意味着被插入到一个父组件中，该组件将具有“英雄”数据，并且“英雄”数据将通过该组件传递到英雄详细信息组件中。英雄实例变量被@Input装饰器标记为输入。

基本上语法是：

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

import { Hero } from "./hero";

使用输入装饰器使父组件可以使用以下实例变量来传递数据。

@Input()

英雄实例变量本身，其类型为Hero，其界面在上面导入：

hero: Hero;

父组件将使用此英雄详情子组件，并通过将英雄数据插入到html模板中将英雄数据传递到其中，如下所示：

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

父组件有一个名为“hero”的实例变量，其中包含数据，并且传递给英雄详情组件。

Answer 2

@Input() hero表示hero是一个从它的parent.e.g传递给该组件的变量

<hero-detail [hero]="(object of hero)"> </hero-detail>

这里我将英雄对象从其父组件传递给hero详细信息组件。

Answer 3

简单地说，通过North: 52 South: -13 East: 82 West: -105 North: 27 South: -45 East: 172 West: -117 North: 0 South: -37 East: 161 West: -160 North: 43 South: -39 East: 26 West: -174 North: 29 South: -7 East: 75 West: -125 North: 19 South: -51 East: 93 West: -49 North: 28 South: -20 East: 26 West: -28关键字，您可以告诉角度，名为input的变量将hero对象作为来自'HeroDetailComponent'的输入，并且能够传递此Hero对象到它的任何子组件。这称为Input Binding

Answer 4

1。 @Input在组件选择器上创建一个属性

使用@Input选择器在选择器上创建一个属性。因此，在@Input() hero_name: string中使用child.component.ts将创建一个名为hero_name的属性。

在parent.component.html中，它类似于：<app-child hero_name='Batman'></app-child>。

在child.component.ts中，您可以使用this.hero_name访问该值。

2。为@Input使用不同的名称

@Input() hero_name: string实际上是@Input('hero_name') hero_name: string的简写。如果方便的话，您可以指定其他名称。

例如：@Input('hero_name') name: string。

在parent.component.html中，它类似于：<app-child hero_name='Batman'></app-child>。

在child.component.ts中，您可以使用this.name访问该值。

3。结合属性绑定

如果将其与属性绑定结合在一起，现在可以从parent.component.ts获取对象或任何东西，并将其传递给child-component.ts。

示例：

child.component.ts

@Component({...})
export class ChildComponent {
  @Input('selected_hero') superhero: Hero;
  
  public some_function() {
    console.log(this.superhero);
  }
}

parent.component.html

<app-child [selected_hero]='hero'></app-child>

parent.component.ts

@Component({...})
export class ParentComponent {
  public hero: Hero = new Hero();
}

Answer 5

这里的答案部分已经讨论了@input 的整个概念，但我几乎没有怀疑，所以也添加它们和答案

@input 在 angular 中的用途是什么？
@input 是一个装饰器，用于父组件到子组件的通信

什么是父组件和子组件？

<component1-selector>
    <componenent2-selector>
    </component2-selector>
</componenent1-selector>

父组件 =>component1 作为子组件的上下文 =>component2

因为 component2 位于 component1 的上下文中，那么 component1 是 component1 的 parent，component 2 是 component1 的 child

需要@input？
我们默认需要它我们无法访问组件外部的组件属性

如果子组件在父组件中，为什么父组件无法访问其所有属性？

因为使所有属性都可绑定（默认情况下）不是一个好主意，这也有助于开发人员通过查看@input 装饰器来跟踪他们用于通信的属性

有关语法及其解释，请阅读此angular documentation link 他们对概念进行了精美的解释

什么是@Input（）用于？

5 个答案: