Angular вводить компонент в innerHtml

Question

Я устанавливаю HTML, возвращаемый API в моем Angular компоненте:

<div [innerHTML]="content"></div>

содержимое в этом примере выглядит примерно так:

<table>
    <tr>
        <td>[audioPlayer:file.mp3]</td>
    </tr>
</table>

Теперь я хотел бы вставить фактический компонент в ячейку таблицы.

Если я создам определенный контейнер, я могу создать компонент с помощью createComponent:

audioPlayerComponentRef: ComponentRef<AudioPlayerComponent>;
@ViewChild('placeholder', { read: ViewContainerRef }) container;

const factory: ComponentFactory<AudioPlayerComponent> = 
this.componentFactoryResolver.resolveComponentFactory(AudioPlayerComponent);
this.audioPlayerComponentRef = this.container.createComponent(factory);

Затем я могу ввести его в контейнер в шаблоне:

<div #placeholder></div>

Однако, возвращаясь к моей первоначальной цели, я не могу использовать такой контейнер, так как компонент должен быть введен в определенную c позицию во внутреннюю Html block.

Я весь день проводил мозговой штурм, но не вижу способа добиться этого.

Answer 1

Вообще говоря, это противоречит принципу работы Angular. [innerHTML] не анализируется для каких-либо функций Angular. Никаких селекторов компонентов или даже ViewContainerRef там нет. Скорее, даже отдаленно подозрительные HTML, CSS и JS удаляются в качестве меры безопасности, поскольку Angular доверяет только своим собственным шаблонам.

Итак, InnerHTML - это no- go. Но я сам был в одной лодке и написал библиотеку для решения именно этой проблемы. С его помощью вы можете свободно загружать компоненты Dynami c в строки без ущерба для безопасности. Если вы все еще застряли на этом, , возможно, вы захотите взглянуть на него .