[Angular] 子コンポーネントから親コンポーネントのメソッドを実行して戻り値を受け取る

子コンポーネントから親コンポーネントのメソッドを実行する場合はemit()を使用します。
ですが、emit()では戻り値が受け取れないので、受け取りたい場合は別の書き方をする必要があります。

やり方

@Input()を使用し親からメソッドを受け取れば実現可能です。

親から子へメソッドを渡す

parent-compomemt.html

<parent-compomemt>
  <child-compomemt [parentFunc]="parentFunc">
</parent-compomemt>

parent-component.ts

parentFunc(num: number): number {
  return num + 1;
}

子で受け取ったメソッドを実行する

child-component.ts

@Input() parentFunc: (num: number) => number;

callParentFunc() {
 const ret = this.parentFunc(1);
}