如何在 Angular 10 中使用动态组件创建动态 html？

编程问答 2022-05-31

问题描述

我已仔细阅读以下问题：Equivalent of $compile in Angular 2 和 How can I use/create dynamic template to compile dynamic Component with Angular 2.0?

我试图理解这些问题中提到的 this woring plunker 中的代码。但是这个plunker已经打不开了。

在我的例子中，我需要动态生成html，并且在生成的html中，还需要动态生成组件。

我创建了一个带有如下选项的选择：

<option>aaa {SingleSelect} bbb {text}</option>
<option>aaa {AutoComplete}</option>
<option>aaa {SingleSelect} bbb {text} ccc {MultiSelect}</option>

{...} 表示动态组件，对于第一个选项，如果选择了这个，我应该替换{SingleSelect} 使用单个选择组件，并将 {text} 替换为输入文本。其余的如 aaa bbb 只是简单的文本，应该显示为标签。

所以如果我选择第一个选项，它的视图应该和下面的代码一样：

<div>
  <span>aaa</span>
  <SingleSelect></SingleSelect>
  <span>bbb</span>
  <input type="text>
</div>

我做了什么： 我创建了一个生成动态组件的指令，该指令以一个参数作为输入，如果参数是SingleSelect，它将返回一个SingleSelectComponent。

我遇到的问题：

我只能生成动态组件，但是如何将生成的组件应用到动态html中？

我尝试使用 [innerHtml]，但由于innerHtml 只能使用静态值，带有动态组件的内部html 似乎不起作用。

stackblitz 中的一个简单示例

有人知道怎么做吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularangular-dynamic-componentsdynamic-htmlhtml