我想在标记中加载一个组件，该标记也使用innerHTML指令

我尝试使用innerHTML指令，同时尝试将组件加载到同一标记中

例如：

<ul *ngFor="let item of array">
    <li [innerHTML]="item.listItemHtml">
        <app-some-component [someInput]='item.componentInput'><app-some-component>
    </li>
</ul>

所以最终结果应该是这样的：

<ul>
    <li>
        <span>list item 1</span>
        <span>component input text 1</span>
    </li>
    <li>
        <span>list item 2</span>
        <span>component input text 2</span>
    </li>
</ul>

清单项目1
组件输入文本1


清单项目2
组件输入文本2

---

我还是一个比较新的角度，所以我试图得到的东西窍门。如果有人能给我一些关于如何实现这一目标的见解。。那太好了

如果同时绑定

innerHTML

属性，则该组件不能位于父元素内部。元素将只包含

innerHTML

绑定设置的HTML

您可以通过设置子元素（组件的同级）的

outerHTML

属性来实现所需的功能。它可以是

div

、

span

或其他类型的元素；无论如何，它都将替换为绑定的HTML内容

<ul *ngFor="let item of array">
  <li>
    <div [outerHTML]="item.listItemHtml"></div>
    <app-some-component [someInput]='item.componentInput'><app-some-component>
  </li>
</ul>

用于演示。
太棒了。非常感谢。