Angular @Output デコレーター

📋 目次（クリックで展開）

Angular の @Output デコレーターは、子コンポーネントから親コンポーネントへイベント通知を行う際に利用します。

子コンポーネントとして、MyLabel コンポーネントがある例で考えてみます。

MyLabel コンポーネントでは、clicked という EventEmitter オブジェクトを準備し、@Output デコレーターで付与しておきます。パラグラフタグがクリックされたタイミングで、clicked.emit() メソッドを呼び出します。

emit() メソッドを呼び出すと、親コンポーネントにイベントを通知することができます。emit() メソッドの引数に任意のオブジェクトを渡すと、親コンポーネントにイベント通知とともにデータを渡すことができます。次の例では、イベント通知とともに ‘paragraph clicked!’ という文字列を親コンポーネントに渡しています。

MyLabel コンポーネント

<p (click)="onParagraphClick()">
my-label works!
</p>
import {
  Component,
  Output,
  EventEmitter
} from '@angular/core';


@Component({
  selector: 'app-my-label',
  templateUrl: './my-label.component.html',
  styleUrls: ['./my-label.component.css']
})
export class MyLabelComponent {
  @Output() clicked = new EventEmitter();
  constructor() { }


  onParagraphClick() {
    this.clicked.emit('paragraph clicked!');
  }
}

イベントを受け取る親コンポーネント側では、MyLabel コンポーネントの clicked イベントを購読します。

AppComponent

<app-my-label (clicked)="onClicked($event)"></app-my-label>
import { Component } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';


  onClicked(args) {
    console.log(args);
  }
}

実行結果

💬 コメント