如何将绝对链接视为Angular中的相对路由？答案

【问题标题】：How to treat absolute links as relative routes in Angular?如何将绝对链接视为Angular中的相对路由？
【发布时间】：2019-07-27 10:57:22
【问题描述】：

我有一个收件箱组件，它显示在后端生成为 HTML 的用户消息。通过设置查看器组件的 [innerHTML] 来呈现消息。

这些消息可以包含链接（格式为<a href="...">），其中包含指向应用程序中其他页面的绝对 URL。目前，当您单击其中一个链接时，Angular 会重新加载页面，就像您单击外部网站的链接一样。

如何让 Angular 直接导航到应用程序中的目标组件，而不是重新加载页面？

其他信息

我想出的一个想法是检查 html 中的绝对链接，尝试将它们与当前主机匹配，如果它们匹配，则删除绝对部分以使其相对。但这不起作用，Angular 在导航到链接时仍会重新加载页面。我认为这是因为没有 routerLink 指令，考虑到消息只是普通的 HTML。如果应该将其视为相对链接，也许一种解决方法是拦截链接打开并将其传递给路由器？

这些链接必须是绝对的，不能只是相对的，因为我们有多个门户应用程序，用户可以通过同一个帐户访问，它们都共享同一个消息中心。有些消息可能链接到门户 A 中的项目，而其他消息可能链接到门户 B 中的项目。这可能看起来有点复杂，但我们有一个很好的理由这样做，我无法在这个问题中解释。

【问题讨论】：

new URL(url).host 之类的东西会帮助引导吗？
@dandavis 我可以检测到绝对 URL 并将其转换为相对 URL，问题是让 Angular 像 routerLinks 一样导航到它们。
你可以动态地将它们更改为相对。我猜如果 Angular 只是扫描加载，它会错过更新。也许有一种方法可以让角度重新扫描标记并找到相关链接？
@dandavis 想通了。无论如何感谢您的建议。

标签： javascript html angular

【解决方案1】：

想通了！

首先拦截消息内容中链接的点击事件：

<div [innerHTML]="message.Content"
     (click)="onContentClick($event)"
     class="content"></div>

如果链接的主机与当前主机匹配，则处理与路由器的链接：

onContentClick(e: MouseEvent) {
  if (e.target instanceof HTMLAnchorElement
      && e.target.host === location.host) {
    e.preventDefault();
    this.router.navigateByUrl(e.target.pathname);
  }
}

【讨论】：