angular - ループ内でコンポーネントを動的にロードする方法は?

Question

ionic 5 プロジェクト用の一種のページ ビルダーを作成したいと考えています。アイデアは、私のページ テンプレートの配列をループすることです。そのループでは、さまざまな種類の子コンポーネント (WordPress の投稿フォーマットなど) をロードできる必要があります。さまざまな種類のテンプレートを使用できます (例: イオン ボタン、イオン カード、イオン アイテム)。これらのコンポーネントごとに、個別のコンポーネントを作成しました。サーバーからデータの配列を取得します。その配列の各項目には、作成したコンポーネント テンプレートを参照する必要があるテンプレート変数があります ( formlyがフォームで行うように)。これの利点は、サーバーがコンポーネントの順序を決定できることです。

私は ng-container と ng-template を組み合わせようとしましたが、これが方法であるかどうかはわかりませんし、ページタイプスクリプトでそれを実装する方法もわかりません. そのループでテンプレートにデータを渡す方法について読みますTemplateRef, ViewChild, ContentChildが、どちらをどのように使用するかはわかりません。

データサンプル

this.components = [
      {
        template: 'buttons', // --> this must load templates/buttons.html
        templateOptions: {
          cards: [
            { title: "button 1", color: "primary"},
            { title: "button 2", color: "secondary"},
          ]
        }
      },
      {
        template: 'items', // --> this must load templates/items.html
        templateOptions: {
          listHeader: "List title",
          items: [
            { title: "item 1", label: "item 1 label"},
            { title: "item 2", label: "item 2 label"},
          ]
        }
      },
      {
        template: 'cards', // --> this must load templates/cards.html
        templateOptions: {
          cards: [
            { title: "card 1", content: "content 1"},
            { title: "card 2", content: "content 2"},
          ]
        }
      }
    ];

ページ テンプレート

<ng-container *ngFor="let component of components">
            <ng-template 
                [ngTemplateOutlet]="component?.template" 
                [ngTemplateOutletContext]="component?.templateOptions"
            ></ng-template>
        </ng-container>

ボタン テンプレート

<ion-toolbar>
    <ion-buttons>
        <ion-button *ngFor="let button of buttons" [color]="button?.color">
            {{ button?.title }}
        </ion-button>
    </ion-buttons>
</ion-toolbar>

ボタンタイプスクリプト

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

@Component({
  selector: 'template-buttons',
  templateUrl: './buttons.component.html',
  styleUrls: ['./buttons.component.scss'],
})
export class templateButtons implements OnInit {
  @Input() buttons: any = [];

  constructor() { }

  ngOnInit() {}

}

ページ モジュール

...
import { templateHeader } from "./../../templates/header/header.component";
import { templateButtons } from "./../../templates/buttons/buttons.component";
import { templateCards } from "./../../templates/cards/cards.component";
import { templateItems } from "./../../templates/items/items.component";
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    PageRoutingModule,
    SharedModule
  ],
  declarations: [SearchPage, templateHeader, templateButtons, templateCards, templateItems]
})
export class SearchPageModule {}

機能するが、正しい方法を感じないのは次のとおりです。

<ng-container *ngFor="let component of components">
             <!-- Buttons -->
            <template-buttons *ngIf="component?.template == 'buttons'" [buttons]="component?.templateOptions?.buttons"></template-buttons>
            <!-- Cards -->
            <template-cards *ngIf="component?.template == 'cards'" [cards]="component?.templateOptions?.cards"></template-cards>
            <!-- Items -->
            <template-items *ngIf="component?.template == 'items'" [cards]="component?.templateOptions?.items"></template-items>
        </ng-container>