Output

Outputはイベントを発行するためのインターフェースです。

利用する場合は@angular/coreよりimportして読み込みます。

import { Output } from '@angular/core';

Class内で@Output()の後に発行するイベント名とEventEmitterのインスタンスを指定します。

@Output() eventName = new EventEmitter();

以下のサンプルでは、Counter Componentが自身のカウンターの増減を制御し、counterChangeというイベントを発行しています。

AppRoot ComponentではcounterChangeが実行された場合に自身のカウンターを増減させています。

import {
  Component,
  EventEmitter,
  Output
} from '@angular/core';
/*
 * Counter Component
 */
@Component({
  selector: 'counter',
  template: `
    <button (click)="increment()">+</button>
   {{counter}}
    <button (click)="decrement()">-</button>
`,
})
export class Counter {
  @Output() counterChange = new EventEmitter();
  private counter:number = 0
  increment(){
    this.counter++;
    this.emmit();
  }
  decrement(){
    this.counter--;
    this.emmit();
  }
  emmit(){
    this.counterChange.emit({
      value: this.counter
    })
  }
}
/*
 * AppRoot Component
 */
@Component({
  selector: 'app-root',
  template: `
   <h1>{{counter}}</h1>
   <counter (counterChange)="myValueChange($event)"></counter>
  `,
})
export class AppRoot {
  private counter:number = 0
  myValueChange($event){
    this.counter = $event.value;
  }
}

@Outputを利用しない方法

@Outputを利用せずに@Componentのoutputsプロパティに配列で発行するイベントを指定することも可能です。

@Component({
  selector: 'counter',
  template: `
    <button (click)="increment()">+</button>
   {{counter}}
    <button (click)="decrement()">-</button>
`,
  outputs: ['counterChange'],
})
export class Counter {
  privade counterChange = new EventEmitter();
  (省略)
}

参考URL

Output interface - Angular

登録日 : 2017年01月31日最終更新日 : 2017年1月31日

Angularリファレンス

Output

@Outputを利用しない方法

参考URL

同じカテゴリー(@angular/core)のエントリー

検索

スポンサードリンク

バージョン

リファレンス