將HTML字符串轉換為Angular Components

Question

假設我們進行API調用，並在String中獲取一些HTML DOM 。 內容是不帶角度的HTML格式，因此我必須先將其轉換為所需的Angular，然后再將其編譯為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>

內部的Angular組件不會被加載 ，整個工作只是由Pipe轉換中包含的safeHTML解析的原始Angular。

為了解決這個問題，我使用了ng-dynamic庫，但是它已經過時並且與AOT編譯不兼容 。 盡管如此，我還是設法將其與JIT編譯一起使用，但這對生產不利，效率低得多 。

這種方法的示例“ parentDIV”是標准的HTML標簽：

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

上下文 包含新組件內部所需的所有依賴關系，例如，我在“ angular-anchor”中使用的第三項服務

從這一點來看，我閱讀了一些有關Angular Elements或Dynamic Components Injector的文檔，但是在我的應用程序中卻找不到。

是否有什么好的方法可以使用我剛才提到的這些方法或其他方法來將我的自定義角度組件與AOT一起使用？

提前致謝。 如果需要，請詢問我更多詳細信息。

Answer 1

如果parent是組件，則<parent [innerHTML]="APIResponseHTML | transformAnchorsPipe"></parent>內部html不是parent的已知屬性

將html作為字符串傳遞給parent組件中的任何屬性-您可以在屬性上使用@Input()裝飾器-您可能對此有所了解

最后嘗試將字符串作為內部html傳遞給parent.component.html任何div標記-我希望這將解析您的html字符串並將html附加到指定的div

如果這不起作用-嘗試為您的html字符串添加html編碼，然后嘗試將其綁定-希望這可以解決您的第一個問題-編碼快樂:)