如何解决如何在 Angular 10 中使用动态组件创建动态 html?
我已仔细阅读以下问题: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 举报,一经查实,本站将立刻删除。