Question

我正在尝试使用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>

我对棱角还比较陌生，所以我试图摆脱困境。如果有人可以给我一些有关我如何能够实现这一目标的见解，那将是很棒的。

Answer 1

如果您还绑定了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>

有关演示，请参见this stackblitz。

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

1 个答案: