【サンプルコード付き】AngularでViewChildとContentChildを使って親子コンポーネント間通信を行う方法

2024-05-26

Angularにおいて、ViewChildとContentChildは、コンポーネントとその子コンポーネント間で通信を行うための重要な機能です。それぞれ異なる役割を持ちますが、どちらもセレクタと呼ばれる属性を用いて、特定の子コンポーネントや要素を参照することができます。

このガイドでは、ViewChildとContentChildで使用できる有効なセレクタについて、分かりやすく日本語で解説します。

ViewChildは、コンポーネントテンプレート内に定義された子コンポーネントや要素を参照するために使用されます。有効なセレクタは以下の通りです。

コンポーネントセレクタ: 子コンポーネントのセレクタ名を使用できます。例：@ViewChild('myChildComponent') child: MyChildComponent;
CSSセレクタ: テンプレート内の要素を参照するためにCSSセレクタを使用できます。例：@ViewChild('.myElement') element: ElementRef;
ローカル変数: テンプレート内で定義されたローカル変数を参照できます。例：@ViewChild('#myInput') input: ElementRef;

ContentChildは、親コンポーネントから子コンポーネントにng-contentを使用して投影された要素を参照するために使用されます。有効なセレクタは以下の通りです。

注意事項

ViewChildとContentChildは、コンポーネントクラスのメンバ変数として宣言する必要があります。
セレクタは、参照したい子コンポーネントや要素を明確に識別する必要があります。

例

以下の例は、ViewChildとContentChildを使用して、親コンポーネントから子コンポーネントにアクセスする方法を示しています。

親コンポーネント

<my-child-component>
  <ng-content></ng-content>
</my-child-component>

import { Component, ViewChild, ContentChild } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <my-child-component #child>
      <ng-content></ng-content>
    </my-child-component>
  `,
})
export class ParentComponent {
  @ViewChild('child') child: MyChildComponent;
  @ContentChild('.myContentElement') contentElement: ElementRef;

  constructor() {
    // 子コンポーネントと投影された要素にアクセスできます
    console.log(this.child);
    console.log(this.contentElement);
  }
}

<ng-content></ng-content>

<div class="myContentElement">
  </div>

ViewChildとContentChildは、Angularにおけるコンポーネント間の通信に役立つ強力なツールです。それぞれのセレクタを理解することで、より効果的に使用することができます。

親コンポーネント (app.component.html)

<my-child-component #child>
  <input type="text" [(ngModel)]="message" />
  <button (click)="sendMessage()">送信</button>

  <ng-content></ng-content>
</my-child-component>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message = '';

  @ViewChild('child') child: MyChildComponent;

  sendMessage() {
    // 子コンポーネントにメッセージを送信する
    this.child.message = this.message;
  }
}

<p>メッセージ: {{ message }}</p>

import { Component, Input } from '@angular/core';

@Component({
  selector: 'my-child-component',
  templateUrl: './my-child.component.html',
  styleUrls: ['./my-child.component.css']
})
export class MyChildComponent {
  @Input() message = '';
}

この例では、以下の操作が行われます。

親コンポーネントは、my-child-component コンポーネントのインスタンスを @ViewChild デコレータを使用して参照します。
親コンポーネントは、[(ngModel)] ディレクティブを使用して、message 入力プロパティを子コンポーネントの入力フィールドにバインドします。
親コンポーネントは、sendMessage メソッドを使用して、message 変数の値を子コンポーネントに送信します。
子コンポーネントは、@Input デコレータを使用して、親コンポーネントから受け取った message プロパティをバインドします。
子コンポーネントは、{{ message }} インターポレーション構文を使用して、受け取ったメッセージをテンプレートに表示します。

この例は、ViewChildとContentChildを使用して、親コンポーネントと子コンポーネント間でデータをやり取りする方法を示す基本的な例です。実際のアプリケーションでは、より複雑なロジックとデータ構造を使用する可能性があります。

補足

この例では、ngModel ディレクティブを使用して、双方向データバインディングを実装しています。これは、親コンポーネントと子コンポーネント間でデータを自動的に同期させるための便利な方法です。
ContentChild デコレータは、この例では使用されていませんが、親コンポーネントから子コンポーネントに投影されたコンテンツにアクセスするために使用できます。

ViewChildとContentChild以外の方法

入力プロパティと出力イベント

最も一般的な方法は、入力プロパティと出力イベントを使用して、親コンポーネントと子コンポーネント間でデータをやり取りすることです。

入力プロパティ: 親コンポーネントは、子コンポーネントの入力プロパティに値を設定することで、子コンポーネントにデータを伝えます。

例:

<my-child-component [message]="message" (onMessage)="onMessageReceived($event)"></my-child-component>

<p>メッセージ: {{ message }}</p>
<button (click)="sendMessage()">送信</button>

<ng-content></ng-content>

// 親コンポーネント
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <my-child-component [message]="message" (onMessage)="onMessageReceived($event)"></my-child-component>
  `,
})
export class ParentComponent {
  message = 'Hello from parent!';

  onMessageReceived(message: string) {
    console.log('Message received from child:', message);
  }
}

// 子コンポーネント
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-child-component',
  templateUrl: './my-child.component.html',
  styleUrls: ['./my-child.component.css']
})
export class MyChildComponent {
  @Input() message: string;
  @Output() onMessage = new EventEmitter<string>();

  sendMessage() {
    this.onMessage.emit('Message from child!');
  }
}

サービス

コンポーネント間で共有するデータやロジックをカプセル化するために、サービスを使用することができます。サービスは、コンポーネントからインジェクションされるクラスです。

// サービス
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class MessageService {
  private message = '';

  getMessage(): string {
    return this.message;
  }

  setMessage(message: string) {
    this.message = message;
  }
}

// 親コンポーネント
import { Component, Inject } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'app-parent',
  template: `
    <my-child-component [messageService]="messageService"></my-child-component>
  `,
})
export class ParentComponent {
  constructor(@Inject(MessageService) private messageService: MessageService) {}
}

// 子コンポーネント
import { Component, Input, Inject } from '@angular/core';
import { MessageService } from './message.service';

@Component({
  selector: 'my-child-component',
  templateUrl: './my-child.component.html',
  styleUrls: ['./my-child.component.css']
})
export class MyChildComponent {
  constructor(@Inject(MessageService) private messageService: MessageService) {}

  @Input() messageService: MessageService;

  getMessage() {
    return this.messageService.getMessage();
  }

  setMessage(message: string) {
    this.messageService.setMessage(message);
  }
}

RxJS

非同期通信や複雑なデータフローを処理するために、RxJSなどのライブラリを使用することができます。RxJSは、Observableと呼ばれるイベントストリームを扱うための関数ライブラリです。

// 親コンポーネント
import { Component, OnInit } from '@angular/core';
import { Observable, fromEvent } from 'rxjs';

@Component({
  selector: 'app-parent',
  template: `
    <my-child-component [message]="message$"></my-child-component>
  `,
})
export class ParentComponent implements OnInit {
  message$ = new Observable<string>((observer) => {
    // メッセージを生成するロジック