Angular で ComponentFactoryResolver を使って動的に作成したコンポーネントに @Input プロパティを設定

2024-04-29

Angular で @Input を ComponentFactoryResolver で作成したコンポーネントで使用する方法

概要

Angular の @Input プロパティは、コンポーネント間でデータを渡すための一般的な方法です。しかし、ComponentFactoryResolver を使って動的にコンポーネントを作成する場合、@Input プロパティを設定するには少し特殊な方法が必要です。

手順

コンポーネントの作成

まず、@Input プロパティを受け取るコンポーネントを作成します。

@Component({
  selector: 'my-input-component',
  template: `
    <p>入力値: {{ inputValue }}</p>
  `,
})
export class MyInputComponent {
  @Input() inputValue: string;
}

次に、ComponentFactoryResolver を使ってコンポーネントを作成します。

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

@Component({
  selector: 'app-root',
  template: `
    <div #container></div>
  `,
})
export class AppComponent {
  @ViewChild('container', { static: true }) containerRef: ElementRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  createInputComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyInputComponent);
    const componentRef = componentFactory.create(this.containerRef);
    const instance = componentRef.instance;

    // @Input プロパティを設定
    instance.inputValue = 'Hello from ComponentFactoryResolver!';
  }
}

最後に、作成したコンポーネントを表示します。

<app-root></app-root>

説明

@Input プロパティを受け取るコンポーネントは、@Input デコレータを使って定義します。
ComponentFactoryResolver を使ってコンポーネントを作成するには、resolveComponentFactory メソッドを使用します。
作成したコンポーネントのインスタンスを取得するには、create メソッドを使用します。
@Input プロパティを設定するには、インスタンスの @Input プロパティに値を代入します。

補足

@ViewChild デコレータを使ってコンポーネントの参照を取得しています。これは、ComponentFactoryResolver で作成したコンポーネントにアクセスするためにも使用できます。
static オプションを @ViewChild デコレータに指定することで、テンプレートがレンダリングされる前にコンポーネントの参照を取得できます。

ComponentFactoryResolver を使って動的にコンポーネントを作成する場合でも、@Input プロパティを使ってコンポーネント間でデータを渡すことができます。

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

@Component({
  selector: 'my-input-component',
  template: `
    <p>入力値: {{ inputValue }}</p>
  `,
})
export class MyInputComponent {
  @Input() inputValue: string;
}

@Component({
  selector: 'app-root',
  template: `
    <button (click)="createInputComponent()">コンポーネントを作成</button>
    <div #container></div>
  `,
})
export class AppComponent {
  @ViewChild('container', { static: true }) containerRef: ElementRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  createInputComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(MyInputComponent);
    const componentRef = componentFactory.create(this.containerRef);
    const instance = componentRef.instance;

    // @Input プロパティを設定
    instance.inputValue = 'Hello from ComponentFactoryResolver!';
  }
}

このコードは、以下の手順を実行します。

my-input-component という名前のコンポーネントを作成します。このコンポーネントは、@Input プロパティ inputValue を受け取り、p タグを使って表示します。
app-root という名前のコンポーネントを作成します。このコンポーネントは、button タグと div タグを持ちます。
button タグがクリックされたとき、createInputComponent メソッドが呼び出されます。
createInputComponent メソッドは、ComponentFactoryResolver を使って MyInputComponent を作成します。
ComponentFactoryResolver は、resolveComponentFactory メソッドを使って、MyInputComponent のコンポーネントファクトリーを取得します。
コンポーネントファクトリーは、create メソッドを使って、MyInputComponent のコンポーネントインスタンスを作成します。
コンポーネントインスタンスの @Input プロパティ inputValue に、Hello from ComponentFactoryResolver! という値を設定します。
作成したコンポーネントインスタンスは、container 変数に格納されている div タグ内に挿入されます。

実行方法

Angular CLI を使って、新しい Angular プロジェクトを作成します。
上記のコードを、app.component.ts ファイルに貼り付けます。
ng serve コマンドを実行して、アプリケーションを実行します。

結果

ブラウザを開くと、以下のような画面が表示されます。

<button>コンポーネントを作成</button>
<div>
  <p>入力値: Hello from ComponentFactoryResolver!</p>
</div>

このコードは、ComponentFactoryResolver を使って動的にコンポーネントを作成し、@Input プロパティを使ってコンポーネント間でデータを渡す方法の例です。実際のアプリケーションでは、より複雑なロジックが必要になる場合があります。

Angular で @Input を ComponentFactoryResolver で作成したコンポーネントで使用する方法：その他の方法

ここでは、他の方法として、以下の2つの方法を紹介します。

この方法は、コンポーネントテンプレート内に @Input プロパティを直接定義することで、ComponentFactoryResolver を使用せずに @Input プロパティを設定できます。

@Component({
  selector: 'my-input-component',
  template: `
    <p>入力値: <input type="text" [(ngModel)]="inputValue"></p>
  `,
})
export class MyInputComponent {
  @Input() inputValue: string;
}

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

@Component({
  selector: 'app-root',
  template: `
    <div #container>
      <my-input-component [inputValue]="inputValue"></my-input-component>
    </div>
  `,
})
export class AppComponent {
  @ViewChild('container', { static: true }) containerRef: ElementRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  inputValue = 'Hello from ComponentFactoryResolver!';
}

[(ngModel)] ディレクティブを使って、inputValue プロパティと input 要素をバインドします。
app-root コンポーネントのテンプレート内で、my-input-component コンポーネントを [inputValue] バインディングを使って使用します。

利点

ComponentFactoryResolver を使用せずに @Input プロパティを設定できる。
コードが簡潔になる。

欠点

動的にコンポーネントを作成できない。

コンポーネントの入出力プロパティを定義する

この方法は、コンポーネントの入出力プロパティを定義することで、@Input プロパティを設定できます。

@Component({
  selector: 'my-input-component',
  template: `
    <p>入力値: {{ inputValue }}</p>
  `,
  inputs: ['inputValue']
})
export class MyInputComponent {
  inputValue: string;
}

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

@Component({
  selector: 'app-root',
  template: `
    <div #container>
      <my-input-component [inputValue]="inputValue"></my-input-component>
    </div>
  `,
})
export class AppComponent {
  @ViewChild('container', { static: true }) containerRef: ElementRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  inputValue = 'Hello from ComponentFactoryResolver!';
}