0

我想为 ionic 5 项目创建一种页面构建器。这个想法是在我的页面模板中循环一个数组。在该循环中，必须可以加载不同类型的子组件（如 WordPress帖子格式）。有多种可能的模板（例如：ion-buttons、ion-card、ion-items）。对于每个组件，我创建了一个单独的组件。从服务器我会得到一组数据。该数组中的每个项目都有一个模板变量，该变量必须引用我创建的组件模板（就像formly对表单所做的那样）。这样做的好处是组件的顺序可以由服务器确定。

我会尝试将 ng-container 和 ng-template 结合起来，但不确定这是不是这样，也不知道如何在页面打字稿中实现它。我将阅读TemplateRef, ViewChild, ContentChild但不确定如何使用 end 如何将数据传递给该循环中的模板。

数据样本

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>
4

0 回答 0