根据属性选择器动态创建组件

时间:2019-10-29 09:40:51

标签: html angular typescript

上下文

在我的应用程序中,管理员可以自由配置一些其他用户需要编译的表单。这些表单可以具有任意数量的预定义类型的输入(例如整数,复选框,文本等)

此配置以这种方式来自服务器(示例):

{ fields: [
   { type: "typeA", maxValue: 50, ...},
   { type: "typeB", maxValue: 70, ...},
   { type: "typeC", maxValue: 40, ...},
   ...
]}

为解决这个问题,我使用属性选择器构建了许多输入组件:

@Component({
  selector: 'component[type=typeA]',
  template: `
    <mat-form-field class="w100p" [floatLabel]="label != null ? 'auto' : 'never'">
    ....
`

问题

如何通过变量中指定的属性选择器来构建组件? 我已经尝试过:

<div> 
  <component type="typeInVariable"></component> 
</div>

其中typeInVariable的值为typeB,但是angular向我返回了一个错误:Template parse errors: 'component' is not a known element:

我该如何解决? 我还创建了一个stackblitz示例here

1 个答案:

答案 0 :(得分:0)

也许您应该在这里使用动态组件。

一些参考文献:

https://angular.io/guide/dynamic-component-loader

https://netbasal.com/things-worth-knowing-about-dynamic-components-in-angular-166ce136b3eb

我有类似的要求,它对我有用。让我知道是否需要更多说明。