组件与Angular中的输入的交互

输入提供了一种机制，允许父组件绑定子组件可以访问的属性。 父组件将属性推送到子组件。

这篇文章涵盖了 Angular 2 及更高版本

在父组件的模板中，只需在子组件的选择器中定义属性绑定。 绑定应该指向父组件的类中可用的属性，该属性位于等号右侧，您希望这些属性可用于子组件。 至于绑定本身的名称（等号左侧），完全取决于您：

父组件模板：story.component.html

<selected-story [story]="currentStory" [character]="mainCharacter">
</selected-story>

父组件类：story.component.ts

export class StoryComponent {
  currentStory: string = 'The Fox Without a Tail';
  mainCharacter: string = 'Henry';
}

现在，在子组件中，从 @angular/code 导入 Input 并使用 @Input 装饰器定义您的输入，如下所示：

子组件类：selected-story.component.ts

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

//...

我们的子组件现在可以从父组件访问 currentStory 和 mainCharacter 的值。 请注意我们如何使用别名 character 来调用子组件中的属性 myCharacter ：

子组件模板：selected-story.component.html

The story: {{ story }}
The character: {{ myCharacter }}

也可以看看：

• 输出