Angularコンポーネント間の通信方法

2年 ago
陽, 向宇
1 minute

Angular では、コンポーネント間で以下の方法で通信できます。

  1. @Input()

例えば、親コンポーネントは子コンポーネントにこのようにデータを渡すことができます。

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

子コンポーネントでは、親コンポーネントから渡されたデータはこのように受け取ることができます。

@Input() data: any;
  1. @Output()　のネイティブの日本語訳：
  2. イベントエミッタ

例えば、子コンポーネントはイベントを定義して、それを発火させることができます。

@Output() dataEvent = new EventEmitter<any>();

onClick() {
  this.dataEvent.emit(data);
}

親コンポーネントは子コンポーネントのイベントをバインドすることで、子コンポーネントから受け渡されるデータを受け取ることができる。

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

親コンポーネントのhandleData()メソッドで、子コンポーネントから受け取ったデータを処理することができます。

  1. コンポーネント間の通信でサービスを使用する：共有サービスを作成することで、コンポーネントは依存性の注入によってそのサービスにアクセスでき、そのサービスに公開データとメソッドを定義できます。コンポーネントはこのサービスを通じて通信できます。

例えば、共通のサービスを構築します。

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private dataSubject = new Subject<any>();
  data$ = this.dataSubject.asObservable();

  sendData(data: any) {
    this.dataSubject.next(data);
  }
}

データを送信するコンポーネントで、このサービスをインジェクトして、データを送信するにはsendData()メソッドを呼び出してください。

constructor(private dataService: DataService) {}

sendData() {
  this.dataService.sendData(data);
}

データを受け取るコンポーネントで、サービスを注入してdata$をsubscribeすることでデータを購読する。

constructor(private dataService: DataService) {}

ngOnInit() {
  this.dataService.data$.subscribe(data => {
    // 处理接收到的数据
  });
}

これらの方法は共通的なコンポーネント間通信においてよく見られますが、実際のシーンやニーズに応じて、適切な方法を選択することが可能です。

bannerAds