Angularで子コンポーネントから親コンポーネントにデータを渡す方法

1. @Input デコレータを使用する方法: 子コンポーネントで、@Input デコレータを使用してプロパティを定義します。これにより、親コンポーネントからデータを子コンポーネントにバインドすることができます。以下は具体的な例です。

   親コンポーネントのテンプレート:

   <app-child [data]="parentData"></app-child>

   子コンポーネントのクラス:

   import { Component, Input } from '@angular/core';
   @Component({
    selector: 'app-child',
    template: '<p>{{ data }}</p>'
   })
   export class ChildComponent {
    @Input() data: any;
   }

   上記の例では、data という名前のプロパティを子コンポーネントで作成し、@Input() デコレータを使用して親コンポーネントからデータをバインドします。

2. イベントを使用する方法: 子コンポーネントでイベントを発行し、親コンポーネントでイベントを購読することで、データを渡すこともできます。以下は具体的な例です。

   子コンポーネントのクラス:

   import { Component, EventEmitter, Output } from '@angular/core';
   @Component({
    selector: 'app-child',
    template: '<button (click)="sendData()">データ送信</button>'
   })
   export class ChildComponent {
    @Output() dataEvent = new EventEmitter<any>();
    sendData() {
      const data = '子コンポーネントからのデータ';
      this.dataEvent.emit(data);
    }
   }

   親コンポーネントのテンプレート:

   <app-child (dataEvent)="receiveData($event)"></app-child>

   親コンポーネントのクラス:

   import { Component } from '@angular/core';
   @Component({
    selector: 'app-parent',
    template: '<p>{{ receivedData }}</p>'
   })
   export class ParentComponent {
    receivedData: any;
    receiveData(data: any) {
      this.receivedData = data;
    }
   }

   上記の例では、子コンポーネントで dataEvent という名前のイベントを作成し、sendData メソッド内でデータを発行します。親コンポーネントでは、(dataEvent)="receiveData($event)" のようにイベントを購読し、receiveData メソッドでデータを受け取ります。

これらの方法を使用すると、Angularで子コンポーネントから親コンポーネントにデータを簡単に渡すことができます。適切な方法を選択し、アプリケーションの要件に応じて使用してください。