Question

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

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

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

其他信息

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

这些链接必须是绝对的，不能只是相对地开头，是因为我们有多个门户网站应用程序，用户可以通过同一个帐户共享同一个消息中心来访问该门户网站应用程序。有些消息可能链接到门户网站A中的某个项目，而另一些消息则可能链接到门户网站B中的某个项目。这似乎有些令人费解，但是我们这样做的理由非常充分，在这个问题中我无法解释。

Answer 1

想通了！

首先拦截邮件内容中链接的click事件：

<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);
  }
}

如何将绝对链接视为Angular中的相对路线？

1 个答案: