子コンポーネントから親コンポーネントのメソッドを呼びたい

Question

タイトルの通りです。

以下に示すコードで、ChildComponentからParentComponentのsayHello()メソッドを呼びたいときに、どのように記述したらよいでしょうか？

親コンポーネント

import { Component, OnInit } from '@angular/core';
import { Injectable, Inject } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child></app-child>
  `
})
export class ParentComponent implements OnInit {

  constructor() { }
  
  ngOnInit() {
  }

  public sayHello(){
    console.log('Hello');
  }

}

子コンポーネント

import { Component, OnInit } from '@angular/core';
import { Injectable, Inject } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <button (click)="onClick()">クリック</button>
  `
})
export class ChildComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  onClick() {
    // 何を書けば良いか？
  }
}

Answer 1

いくつか方法はありますが、Dependency Injectionを利用したコンポーネントインスタンスの取得がシンプルでわかりやすいかと思います。

providersに指定されたサービスしかインジェクションできないと思われがちですが、実はコンポーネントのコンストラクタでのインジェクションは、上位のコンポーネントやディレクティブのインスタンスも取得できます。

@Component({
  selector: 'parent',
  template: `
    <child></child>
  `,
})
export class Parent {
  sayHello() {
    window.alert('Hello!');
  }
}

@Component({
  selector: 'child',
  template: `
    <div>
      <button (click)="sayHello()">Hello</button>
    </div>
  `,
})
export class Child {
  constructor(private parent: Parent) {
  }
  
  sayHello() {
    this.parent.sayHello();
  }
}

実際に動くサンプルはこちらです http://plnkr.co/edit/38rPk97YeKu6bK4RAZuU?p=preview

あまり推奨はされないですが、必要なときはこのように書けば対応できます。

もうひとつ考えられる方法は親コンポーネントの this を一旦コンポーネントクラスのフィールドに代入し、テンプレート中のデータバインディングによって子コンポーネントに渡す方法です。

@Component({
  selector: 'parent',
  template: `
    <child [parent]="self"></child>
  `,
})
export class Parent {
  self = this;

  sayHello() {
    window.alert('Hello!');
  }
}

ここまで親コンポーネントのメソッドを子コンポーネントから呼び出すための方法を紹介しましたが、理想的には子コンポーネントのイベントをトリガーにして親コンポーネントが自分自身のメソッドを呼び出すべきです

@Component({
  selector: 'parent',
  template: `
    <child (greeting)="sayHello()"></child>
  `,
})
export class Parent {
  sayHello() {
    window.alert('Hello!');
  }
}

@Component({
  selector: 'child',
  template: `
    <div>
      <button (click)="sayHello()">Hello</button>
    </div>
  `,
})
export class Child {
  @Output() greeting = new EventEmitter();
  
  sayHello() {
    this.greeting.emit();
  }
}

Comments

[kenk]

とてもわかりやすい回答をありがとうございました。
よく理解できました！