преобразовать строку 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 содержит метод щелчка, который выполняет код снаружи этих компонентов, но внутри angular (из службы).

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

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

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

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

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

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

context содержит все зависимости, необходимые внутри нового компонента, например мой третий Сервис, который я использую в "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, а затем попробуйте связать ее - надеюсь, это решит вашу первую проблему - счастливое кодирование:)