时间戳

首页 > 解决方案 > 如何在 Angular 10 中使用动态组件创建动态 html？

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

问题描述

我已经仔细阅读了这些问题：Angular 2 中 $compile 的等效项以及如何使用/创建动态模板来使用 Angular 2.0 编译动态组件？

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

就我而言，我需要动态生成html，而在生成的html中，还需要动态生成组件。

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

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

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

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

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

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

我遇到的问题：

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

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

stackblitz中的一个简单示例

有谁知道该怎么做？

标签： htmlangularangular-dynamic-componentsdynamic-html

解决方案

推荐阅读