在 Angular InnerHTML 的錨標簽中啟用 routerLink

Question

I have an XML database and an XSLT document to transform this XML into HTML before passing to the server and an Angular client. 然后我使用[innerHTML]顯示這個 HTML 。 我希望能夠使用錨標記在頁面內導航（例如腳注）並最終導航到不同的組件。 我已經包含了腳注的示例代碼。 鑒於 Angular 在使用 innerHTML 時刪除了 routerLink 屬性，我正在研究解決方案編輯 DOM 元素並手動添加屬性和點擊行為。 但是，這似乎不是很 Angular-y，所以我想知道是否有更好的方法來做到這一點？

document = '<a routerLink="." fragment="45"><sup>45</sup></a><p>Other text</p><div id="45>Footnote text</div>'


<div id="view-panel" [innerHTML]="document | safe: 'html'">

Answer 1

我創建了一個 package: ngx-event-handler ，它允許你做你不應該做但有時不得不做的事情。 就像收聽文檔事件以檢測外部元素單擊或在您的情況下處理來自 innerHTML 的錨點單擊。

這里是Stackblitz ：

<div (handleEvent)="routerlinkClicked($event)" 
     [inclusion]="['a']" 
      id="view-panel"
      [innerHTML]="document">
</div>

routerlinkClicked(element : HTMLElement) {
   this.router.navigate([element.getAttribute('routerlink')]);
}

在這個StackBlitz的最后一個例子中，我處理了 href