テンプレートコンテキストオブジェクトでテンプレート参照変数を取得

2024-04-27

Angular コンポーネントクラスからテンプレート参照変数にアクセスする方法

テンプレート参照変数は、Angular テンプレート内で HTML 要素に割り当てられる特殊な名前です。これらの変数は、コンポーネントクラスからアクセスして、その要素に関連するプロパティやメソッドを操作することができます。

テンプレート参照変数を使用する利点

DOM 要素を直接操作することで、コンポーネントロジックを簡潔に記述できます。
ユーザー入力値をイベントハンドラ以外で取得することができます。
コンポーネント間の通信を簡素化することができます。

テンプレート参照変数にアクセスするには、以下の2つの方法があります。

ローカル変数として宣言

コンポーネントクラス内で、テンプレート参照変数をローカル変数として宣言することができます。

export class MyComponent {
  @ViewChild('myElement') myElement: ElementRef;

  ngAfterViewInit() {
    // 'myElement' DOM 要素にアクセスできます
    console.log(this.myElement.nativeElement.textContent);
  }
}

この例では、myElement というテンプレート参照変数が ViewChild デコレータを使用して myElement ローカル変数にバインドされています。 ngAfterViewInit ライフサイクルフック内で、myElement 変数を使用して DOM 要素のコンテンツログを出力しています。

テンプレートコンテキストオブジェクトを使用して、テンプレート参照変数にアクセスすることもできます。

export class MyComponent {
  getValue() {
    const inputElement = this.template.nativeElement.querySelector('#myInput');
    return inputElement.value;
  }
}

この例では、getValue メソッドを使用して、#myInput テンプレート参照変数に対応する DOM 要素の値を取得しています。 template プロパティは、テンプレートコンテキストオブジェクトへの参照を提供します。

補足

テンプレート参照変数は、コンポーネントテンプレート内でのみ使用できます。
同じテンプレート内で複数の要素に同じ名前のテンプレート参照変数を割り当てることはできません。
コンポーネント間でテンプレート参照変数を共有するには、コンポーネント間の参照渡しやイベントを使用する必要があります。

Angular コンポーネントクラスからテンプレート参照変数にアクセスするサンプルコード

この例では、ボタンをクリックすると、コンポーネントクラス内の myElement ローカル変数を使用して、ボタンのテキストを取得してコンソールに出力します。

HTML テンプレート

<button #myButton>クリック</button>

コンポーネントクラス

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

@Component({
  selector: 'app-my-component',
  template: `
    <button #myButton>クリック</button>
  `,
})
export class MyComponent {
  @ViewChild('myButton') myButton: ElementRef;

  onClick() {
    console.log(this.myButton.nativeElement.textContent);
  }
}

例2: テンプレートコンテキストオブジェクトを使用

この例では、getValue メソッドを使用して、#myInput テンプレート参照変数に対応する入力フィールドの値を取得してコンソールに出力します。

<input type="text" id="myInput">
<button (click)="getValue()">取得</button>

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

@Component({
  selector: 'app-my-component',
  template: `
    <input type="text" id="myInput">
    <button (click)="getValue()">取得</button>
  `,
})
export class MyComponent {
  getValue() {
    const inputElement = this.template.nativeElement.querySelector('#myInput');
    console.log(inputElement.value);
  }
}

これらはあくまで基本的な例であり、実際の用途に合わせてコードを調整する必要があります。
テンプレート参照変数は、コンポーネントロジックを簡潔に記述するための強力なツールですが、使いすぎるとコードが複雑になる可能性があります。適切な状況で使用することが重要です。

Angular コンポーネントクラスからテンプレート参照変数にアクセスするその他の方法

ContentChildren と ContentChild デコレータは、コンポーネントの子要素にアクセスするために使用できます。これらのデコレータを使用して、テンプレート参照変数にアクセスすることもできます。

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

@Component({
  selector: 'app-parent',
  template: `
    <ng-content></ng-content>
  `,
})
export class ParentComponent {
  @ContentChildren('myInput') myInputs: ElementRef[];

  getValue() {
    this.myInputs.forEach(inputElement => {
      console.log(inputElement.nativeElement.value);
    });
  }
}

@Component({
  selector: 'app-child',
  template: `
    <input type="text" #myInput>
  `,
})
export class ChildComponent {
}

この例では、ParentComponent は ContentChildren デコレータを使用して、#myInput テンプレート参照変数を持つすべての子 ChildComponent インスタンスにアクセスします。 getValue メソッドは、それぞれの子コンポーネントの入力フィールドの値をコンソールに出力します。

ngTemplateOutlet ディレクティブを使用して、テンプレートを動的に挿入することができます。このディレクティブを使用して、テンプレート参照変数にアクセスすることもできます。

import { Component, Directive, TemplateRef, ViewContainerRef } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `
    <ng-template #myTemplate>
      <input type="text" #myInput>
    </ng-template>

    <button (click)="createOutput()">出力</button>

    <div *ngTemplateOutlet="myTemplate"></div>
  `,
})
export class MyComponent {
  @ViewChild('myInput') myInput: ElementRef;

  createOutput() {
    console.log(this.myInput.nativeElement.value);
  }
}

この例では、myTemplate というテンプレート参照変数が、#myInput テンプレート参照変数を持つテンプレートにバインドされています。 createOutput メソッドは、テンプレートが挿入されたときに myInput 入力フィールドの値をコンソールに出力します。

カスタムディレクティブを使用して、テンプレート参照変数にアクセスする独自のロジックをカプセル化することができます。

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[myInput]',
})
export class MyInputDirective {
  @Input() myInput: ElementRef;

  @HostListener('input') onInput() {
    console.log(this.myInput.nativeElement.value);
  }
}