在 Angular InnerHTML 的锚标记中启用 routerLink答案

【问题标题】：Enable routerLink in anchor tags in Angular InnerHTML在 Angular InnerHTML 的锚标记中启用 routerLink
【发布时间】：2020-10-20 12:49:46
【问题描述】：

我有一个 XML 数据库和一个 XSLT 文档，用于在传递给服务器和 Angular 客户端之前将此 XML 转换为 HTML。然后我使用[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'">

【问题讨论】：

这个答案怎么样：stackoverflow.com/questions/55350647/…

标签： javascript html angular anchor innerhtml

【解决方案1】：

我创建了一个包：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的

【讨论】：