Angular 动态项目/投入

我正在学习离子框架。我正在构建一个JSON表单系统，我知道有一些包可以处理这个问题，但是我想构建一个简单的包。目前它工作得很好，但是我想知道是否有一种方法可以动态地选择我要使用的输入。理想情况下，我能够在html标记中定义输入，例如：然而，情况似乎并非如此

我通过使用ngIf语句解决了这个问题，如下所示：

    <ion-card *ngFor="let gf of generatedForm">
      <h1>{{gf.slug}}</h1>
      <ion-item>
        <ion-label>{{gf.data.label}}</ion-label>
        <ng-container *ngIf="gf.data.type === 'select'">
          <ion-select multiple={{gf.data.multiple}} placeholder="Select One">
            <ion-select-option *ngFor="let gfs of gf.schema.enum" value={{gfs}}>{{gfs}}</ion-select-option>
          </ion-select>
        </ng-container>
        <ng-container *ngIf="gf.data.type === 'textarea'">
          <ion-label position="floating">Description</ion-label>
          <ion-textarea></ion-textarea>
        </ng-container>
        <ng-container *ngIf="gf.data.type !== 'textarea' || gf.data.type !== 'select'">
          <ion-input type={{gf.data.type}}></ion-input>
        </ng-container>
      </ion-item>
    </ion-card>

{{gf.slug}}
{{gf.data.label}
{{gfs}
描述

---

正如我所说，它工作得很好，但我真的不喜欢我这样做，我想知道是否有一种更精细的方法来完成它，而不是针对每种类型的输入标记的if语句。文本、日期和时间等标记在

中起作用。您可以为每个选项创建一个组件，然后可以从typescript文件动态创建它们。
这可以使用
ComponentFactoryResolver

打字稿

import { ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory } from '@angular/core';
...//Components imports.

@ViewChild("container", { read: ViewContainerRef, static: true }) container;
// Every type is mapped to a component reference
component = {
    'text': TextComponent,
    'number': NumberComponent,
    'hidden': HiddenComponent,
    'date': DateComponent,
    'text_area': TextAreaComponent,
    'relationship': DropdownComponent,
    'select_dropdown': TextComponent,
    'file': FileComponent,
    'checkbox': CheckboxComponent,
    'select': DropdownComponent,
    'offerItems': OfferItemsComponent,
    'password':PasswordComponent,
  }
      constructor( private resolver: ComponentFactoryResolver) { }
      createComponent(type) {
        const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(this.component[type]);
        this.componentRef = this.container.createComponent(factory);
      }

import{ViewChild，ViewContainerRef，ComponentFactoryResolver，ComponentFactory}来自'@angular/core'；
…//组件导入。
@ViewChild（“container”，{read:ViewContainerRef，static:true}）容器；
//每个类型都映射到一个组件引用
组件={
“文本”：文本组件，
“数字”：数字组件，
“隐藏”：隐藏组件，
“日期”：DateComponent，
“文本区域”：文本区域组件，
“关系”：下拉组件，
“选择下拉列表”：TextComponent，
“文件”：FileComponent，
“复选框”：复选框组件，
“选择”：下拉组件，
“报价单”：报价单组成部分，
“密码”：PasswordComponent，
}
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
createComponent（类型）{
常量工厂：ComponentFactory=this.resolver.resolveComponentFactory（this.component[type]）；
this.componentRef=this.container.createComponent（工厂）；
}

因此，每次需要调用函数时，都需要对数据进行循环

html

您可以为每个选项创建一个组件，然后可以从typescript文件动态创建它们。
这可以使用
ComponentFactoryResolver

打字稿

import { ViewChild, ViewContainerRef, ComponentFactoryResolver, ComponentFactory } from '@angular/core';
...//Components imports.

@ViewChild("container", { read: ViewContainerRef, static: true }) container;
// Every type is mapped to a component reference
component = {
    'text': TextComponent,
    'number': NumberComponent,
    'hidden': HiddenComponent,
    'date': DateComponent,
    'text_area': TextAreaComponent,
    'relationship': DropdownComponent,
    'select_dropdown': TextComponent,
    'file': FileComponent,
    'checkbox': CheckboxComponent,
    'select': DropdownComponent,
    'offerItems': OfferItemsComponent,
    'password':PasswordComponent,
  }
      constructor( private resolver: ComponentFactoryResolver) { }
      createComponent(type) {
        const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(this.component[type]);
        this.componentRef = this.container.createComponent(factory);
      }

import{ViewChild，ViewContainerRef，ComponentFactoryResolver，ComponentFactory}来自'@angular/core'；
…//组件导入。
@ViewChild（“container”，{read:ViewContainerRef，static:true}）容器；
//每个类型都映射到一个组件引用
组件={
“文本”：文本组件，
“数字”：数字组件，
“隐藏”：隐藏组件，
“日期”：DateComponent，
“文本区域”：文本区域组件，
“关系”：下拉组件，
“选择下拉列表”：TextComponent，
“文件”：FileComponent，
“复选框”：复选框组件，
“选择”：下拉组件，
“报价单”：报价单组成部分，
“密码”：PasswordComponent，
}
构造函数（专用冲突解决程序：ComponentFactoryResolver）{}
createComponent（类型）{
常量工厂：ComponentFactory=this.resolver.resolveComponentFactory（this.component[type]）；
this.componentRef=this.container.createComponent（工厂）；
}

因此，每次需要调用函数时，都需要对数据进行循环

html