グローバル変数も駆使！Angularでコンポーネントとディレクティブ間でデータを共有する方法

2024-06-20

Angular コンポーネントからディレクティブにアクセスする方法

ViewChild デコレータを使用すると、テンプレート内で定義されたディレクティブインスタンスにアクセスできます。

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

@Component({
  selector: 'app-my-component',
  template: `
    <my-directive #myDirective></my-directive>
    <button (click)="accessDirective()">ディレクティブにアクセス</button>
  `
})
export class MyComponent {
  @ViewChild('myDirective') myDirective: MyDirective;

  accessDirective() {
    console.log(this.myDirective.myProperty); // ディレクティブのプロパティにアクセス
  }
}

この例では、myDirective テンプレート参照変数を使用して MyDirective ディレクティブインスタンスを myDirective プロパティにバインドしています。 accessDirective メソッド内で、このプロパティを使用してディレクティブのプロパティ myProperty にアクセスしています。

コンポーネントとディレクティブ間で入出力バインディングを使用する

コンポーネントからディレクティブに値を渡すには、@Input デコレータを使用します。

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

@Component({
  selector: 'my-directive',
  template: `
    <p>myProperty: {{ myProperty }}</p>
  `
})
export class MyDirective {
  @Input() myProperty: string;
}

この例では、MyDirective ディレクティブには myProperty という @Input プロパティがあります。コンポーネント側では、このプロパティにバインドする値を <my-directive [myProperty]="myValue"></my-directive> のようにテンプレート内で指定できます。

ディレクティブからコンポーネントへの入出力バインディング

ディレクティブからコンポーネントにイベントを発行するには、@Output デコレータを使用します。

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

@Component({
  selector: 'my-directive',
  template: `
    <button (click)="onClick.emit()">イベント発行</button>
  `
})
export class MyDirective {
  @Output() onClick = new EventEmitter();
}

補足

ViewChild デコレータは、テンプレート内で定義されたディレクティブインスタンスにのみアクセスできます。コンポーネント側で作成されたディレクティブインスタンスにアクセスするには、コンポーネントとディレクティブ間で入出力バインディングを使用する必要があります。
コンポーネントとディレクティブ間で共有するデータ量が多い場合は、サービスを使用する方が適切な場合があります。

これらの方法を状況に応じて使い分けることで、コンポーネントとディレクティブ間で効果的に連携することができます。

なお、上記の方法は Angular 8 以降で動作します。それ以前のバージョンの場合は、一部異なる点がある可能性がありますので、ご注意ください。

Angular コンポーネントとディレクティブ間でのデータ共有サンプルコード

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angular コンポーネントとディレクティブ間通信';
  message = '';

  onChangeMessage(newMessage: string) {
    this.message = newMessage;
  }
}

<my-directive [message]="message" (changeMessage)="onChangeMessage($event)"></my-directive>

my-directive.ts

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

@Component({
  selector: 'my-directive',
  template: `
    <p>メッセージ: {{ message }}</p>
    <input type="text" [(ngModel)]="message">
    <button (click)="changeMessage.emit(message)">メッセージ変更</button>
  `
})
export class MyDirective {
  @Input() message: string;
  @Output() changeMessage = new EventEmitter<string>();
}

/* styles */

説明

app.component.ts では、コンポーネントクラス AppComponent を定義します。このコンポーネントには、title プロパティと message プロパティがあります。 message プロパティは、my-directive ディレクティブに渡される値です。 onChangeMessage メソッドは、my-directive ディレクティブから発行される changeMessage イベントを処理します。
app.component.html では、my-directive ディレクティブをコンポーネントテンプレート内に配置します。 message プロパティを使用してコンポーネントの message プロパティをディレクティブにバインドし、changeMessage イベントを使用してディレクティブの changeMessage イベントをコンポーネントの onChangeMessage メソッドにバインドします。
my-directive.ts では、ディレクティブクラス MyDirective を定義します。このディレクティブには、message 入力プロパティと changeMessage 出力イベントがあります。 message プロパティは、コンポーネントから渡される値を格納します。 changeMessage イベントは、ユーザーがディレクティブ内の入力フィールドに入力した値を発行します。
app.component.css では、コンポーネントとディレクティブのスタイルを定義します。