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

Question

上下文

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

此配置以这种方式来自服务器（示例）：

{ 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。

Answer 1

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

一些参考文献：

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

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

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