出力は、子コンポーネントがその親コンポーネントまでイベントを発行するためのメカニズムを提供します。
この投稿はAngular2以上をカバーしています
親コンポーネントのテンプレートで、子コンポーネントのセレクターの一部としてイベントバインディングを定義します。 バインディングは、子から受信したデータに対してアクションを実行する親コンポーネントのクラスで定義されたメソッドを指している必要があります。 $ event には、子から放出されたペイロードが含まれています。
親コンポーネントテンプレート：story.component.html
<selected-story (selectStory)="getStory($event)"> </selected-story>
親コンポーネントクラス：story.component.ts
export class StoryComponent {
story: string = '';
子コンポーネントで、OutputとEventEmitterを@angle / code からインポートし、次のように@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)">
