时间戳

首页 > 解决方案 > 我想在标签内加载一个组件，该组件也使用 innerHTML 指令

html - 我想在标签内加载一个组件，该组件也使用 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>

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

标签： htmlangulartypescriptangular2-directives

解决方案

如果还绑定innerHTML属性，则不能将组件包含在父元素中。该元素将仅包含innerHTML绑定设置的 HTML。

outerHTML您可以通过设置子元素（组件的兄弟）的属性来实现您想要的。它可以是 a div、 aspan或其他类型的元素；无论如何，它将被绑定的 HTML 内容替换。

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

请参阅此 stackblitz以获取演示。

推荐阅读