技術

【Angular6】Angularで子コンポーネントから親コンポーネントのメソッドを呼び出す

投稿日:

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で受け取れます。

これでコンポーネントから親コンポーネントに引数を渡して、メソッドを呼ぶことができました。

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

[ Rails ]ActiveRecord::RecordInvalidで怒られ、saveができない!

こんにちは。たなかです。 新しいプロジェクトの参画が決まって、今はrailsを書 …

[Ionic]UnhandledPromiseRejectionWarning: CordovaError: Requirements check failed for JDK 1.8 or greater

こんにちわ。田中です。 参画しているプロジェクトで使っているのもあって、現在Io …

ASCIIコード表のMarkdown(転用可能)

どうも中田です。 特に意味はないですが、ASCIIコード表をMarkdownで作 …

no image

heroku + node.jsでError R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

こんにちは heroku + node.jsでアプリを作っていて、いざherok …

no image

【Angular】Delete methodにbodyデータを付与する

こんにちは 今回はAngularのDeleteメソッドでbodyデータを付与する …