组件与Angular中的输出交互

输出为子组件提供了一种将事件发送到其父组件的机制。

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

在父组件的模板中，将事件绑定定义为子组件选择器的一部分。绑定应该指向父组件的类中定义的方法，该方法对从子组件接收到的数据执行操作。 $event 包含从孩子发出的有效载荷：

父组件模板：story.component.html

<selected-story (selectStory)="getStory($event)">
</selected-story>

父组件类：story.component.ts

export class StoryComponent {
  story: string = '';

在子组件中，从 @angular/code 导入 Output 和 EventEmitter 并使用 @Output 装饰器定义输出，如下所示：

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

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

//...
export class SelectedStoryComponent {
  story: string;
  @Output() selectStory = new EventEmitter<string>();

我们的 EventEmitter 对象有一个 emit() 方法将事件推送到父组件。

现在在子组件的模板中，您可以定义将发射回父组件的事件绑定：

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

<input #storyChoice placeholder="Your fav story">
<button (click)="onSelectStory(storyChoice.value)">

也可以看看：

输入