Angularでアプリを作っている時、子コンポーネントから親コンポーネントのメソッドを呼びたい時があります。
呼びたい時は子コンポーネント側でOutputとEventEmitterを@angular/coreからimportする必要があります。
// 子コンポーネント
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: '<div (click)="say()">test</div>'
})
export class ChildComponent implements OnInit{
@Output() greeting = new EventEmitter();
say() {
this.greeting.emit();
}
}
// 親コンポーネント
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent,
templateUrl: '<app-child (greeting)="sayHello()"></child>'
})
export class ParentComponent implements OnInit{
sayHello() {
console.log("Hello");
}
}
// 実行結果
// "Hello"
これでコンポーネントから親コンポーネントのメソッドを呼び出せるようになりましたが、
子コンポーネントから親コンポーネントに変数を渡したい時もあります。
// 子コンポーネント
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: '<div (click)="say()">test</div>'
})
export class ChildComponent implements OnInit{
@Output() greeting = new EventEmitter();
say() {
this.greeting.emit("こんにちは");
}
}
// 親コンポーネント
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-parent,
templateUrl: '<app-child (greeting)="sayHello($event)"></child>'
})
export class ParentComponent implements OnInit{
sayHello(text) {
console.log(text);
}
}
// 実行結果
// "こんにちは"
emitの引数は$eventで受け取れます。
これでコンポーネントから親コンポーネントに引数を渡して、メソッドを呼ぶことができました。
