0Pricing
Angular Academy · レッスン

TemplateRefとViewContainerRef

テンプレートを動的にレンダリングします

「TemplateRefとViewContainerRef」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

命令的な描画

宣言的にではなく、プログラムからコンテンツを描画しなければならない場合があります。Angularでは、この低レベルの制御のためにTemplateRefとViewContainerRefを提供しています。

TemplateRef

TemplateRefは<ng-template>へのハンドルです。後からインスタンス化できるマークアップを表します。

tpl = viewChild.required<TemplateRef<unknown>>('tpl');

ViewContainerRef

ViewContainerRefは、ビューをアタッチできるDOM上の場所です。これをインジェクトして、その場所に何を描画するかを制御します。

private vcr = inject(ViewContainerRef);

createEmbeddedView

この2つを組み合わせます。createEmbeddedViewは、TemplateRefをViewContainerRef内にインスタンス化します。

this.vcr.createEmbeddedView(this.tpl());

コンテキストの受け渡し

2番目の引数としてコンテキストオブジェクトを渡すことができ、let-変数からアクセスできます。

this.vcr.createEmbeddedView(this.tpl(), {
  $implicit: 'Hello',
  count: 3
});

ビューのクリア

ViewContainerRef.clear()は、それによって作成されたすべてのビューを削除します。これにより、動的コンテンツの表示と非表示を切り替えられます。

this.vcr.clear();

カスタム構造ディレクティブ

このパターンは、カスタム構造ディレクティブの基盤になります。ディレクティブは両方の参照をインジェクトし、条件に応じて描画します。

@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
  private tpl = inject(TemplateRef<unknown>);
  private vcr = inject(ViewContainerRef);
}

入力への反応

ディレクティブ入力のsetterによってcreateとclearを実行し、ビューを表示または非表示にします。

@Input() set appUnless(condition: boolean) {
  if (!condition) {
    this.vcr.createEmbeddedView(this.tpl);
  } else {
    this.vcr.clear();
  }
}

インデックス位置への挿入

createEmbeddedViewではインデックスを指定して、兄弟ビュー間での挿入順序を制御できます。

this.vcr.createEmbeddedView(this.tpl(), {}, 0);

createComponent

ViewContainerRefでは、createComponentを使ってコンポーネントを動的にインスタンス化することもできます。これはComponentFactoryResolverに代わる、現代的な方法です。

const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');

クリーンアップ

命令的に作成したビューはクリーンアップする必要があります。ホストコンポーネントを破棄すると、そのViewContainerRefは自動的にクリアされますが、手動で切り替える場合はclear()を呼び出してください。

理解度チェック

命令的な描画についての理解度を確認します。

まとめ

TemplateRefはテンプレートマークアップへのハンドル、ViewContainerRefはDOMへの挿入ポイントであり、createEmbeddedViewによって前者を後者に描画できることを学びました。これらを組み合わせることで、カスタム構造ディレクティブや動的コンポーネントを実現できます。

よくある質問

「TemplateRefとViewContainerRef」レッスンは無料ですか？

はい。「TemplateRefとViewContainerRef」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「TemplateRefとViewContainerRef」で何を学びますか？

テンプレートを動的にレンダリングします ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。

「TemplateRefとViewContainerRef」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 単一スロットのコンテンツプロジェクション
  2. selectによるマルチスロットプロジェクション
  3. ng-templateとng-container
  4. TemplateRefとViewContainerRef
← Angular Academyに戻る