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

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>

我对 angular 还是比较陌生，所以我想掌握一些窍门。如果有人能给我一些关于我如何能够实现这一目标的见解……那就太好了。

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 指令

I want to load a component inside of a tag which also uses the innerHTML directive

html

angular

typescript

angular2-directives