Преобразовать строку HTML в угловые компоненты

Question

Скажем, мы делаем вызов API и получаем HTML DOM в String. Контент поставляется в формате HTML без углов, поэтому мне нужно сначала преобразовать его в Angular, где я хочу, а затем скомпилировать его как угловой.

Пример ответа API:

<div>
...some more html...
<h1>a header</h1>
...some more html...
<a href="somewhere.com" class="a-class" id="a-id">A Link</a>
...some more html...
</div>

Я преобразую это, чтобы получить все якоря <a href="x"></a> и преобразование их в угловые компоненты с входами и выходами, которые должны быть введены в родительский контейнер и проанализированы все вместе, например:

<angular-anchor   
  [href]="somewhere.com"
  [innerClass]="thisClasses"
  [innerID]="thisID" 
  [content]="thisContent">
</angular-anchor>

angular-anchor содержит метод click, который выполняет код снаружи этих компонентов, но внутри angular (из службы).

Используя [innerHTML] в родительском контейнере, где преобразование выполняется с помощью канала перед тем, как:

<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent>

Угловые компоненты внутри НЕ будут загружены, и вся работа будет просто необработанной. Угловой анализируется с помощью safeHTML, включенного в преобразование Pipe.

Для решения этой проблемы я использовал библиотеку ng-dynamic, но она устарела и не совместима с компиляцией AOT. Несмотря на это, мне удается работать с JIT-компиляцией, но это плохо для производства и намного менее эффективно.

Примером такого подхода "parentDIV" является стандартный тег HTML:

<parentDIV *dynamicComponent="APIResponseHTML | transformAnchorsPipe; 
    context: {dependency: dependencyName};">
</parentDIV>

контекст содержит все зависимости, необходимые внутри нового компонента, например, мой третий Сервис, который я использую в "angular-anchor"

С этого момента я прочитал несколько документов об Угловых элементах или Инжекторе динамических компонентов, но я не смог получить его в своем приложении.

Есть ли какой-нибудь хороший подход, чтобы использовать мои собственные угловые компоненты, доступные с AOT, используя эти методы, которые я только что упомянул, или любые другие?

Заранее спасибо. Спросите меня для более подробной информации, если это необходимо.

Answer 1

<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent> Внутренний HTML не является известным свойством parent если parent является компонентом

Передайте ваш html как строку любому из свойств в parent компонент - вы можете достичь с помощью @Input() декоратор на ваши свойства - вы можете иметь представление об этом

Наконец, попробуйте передать строку в качестве внутреннего HTML любому из ваших div теги в parent.component.html - Я надеюсь, что это будет проанализировать вашу строку HTML и добавить HTML внутри указанного div

Если это не сработало - попробуйте добавить html кодирование для вашей строки HTML, а затем попробуйте связать ее - надеюсь, это решит вашу первую проблему - счастливое кодирование:)