Я хочу загрузить компонент внутри тега, который также использует директиву innerHTML - PullRequest
Новая
       7

Я хочу загрузить компонент внутри тега, который также использует директиву innerHTML

0 голосов
/ 10 января 2019

Я пытаюсь использовать директиву 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, поэтому я пытаюсь разобраться в вещах. Если бы кто-нибудь мог дать мне некоторое представление о том, как я мог бы достичь этого ... это было бы здорово.

1 Ответ

0 голосов
/ 10 января 2019

Вы не можете иметь компонент внутри родительского элемента, если вы также связываете свойство innerHTML. Элемент будет содержать только HTML-код, установленный привязкой innerHTML.

Вы можете достичь желаемого, установив свойство 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>

См. этот стек для демонстрации.

...