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

Question

I have an inbox component that shows the user messages which are generated as HTML on the backend. The messages are rendered by setting [innerHTML] of the viewer component.

These messages can contain links (in the form <a href="..."> ) with absolute URLs to other pages in the app. Currently, when you click one of the links, Angular loads the page anew just like you had clicked a link to an external website.

How do I get Angular to just navigate straight to the target component in the app instead of reloading the page?

Additional Info

One idea I came up with was to check the html for absolute links, try to match them against the current host, and if they match, remove the absolute part to make them relative. This didn't work though, and Angular still reloads the page when navigating to the link. I assume this is because there's no routerLink directive considering the message is just vanilla HTML. Maybe a workaround would be to intercept the link opening and pass it on to the router instead if it should be treated as a relative link?

The reason these links have to be absolute and can't just be relative to begin with is because we have multiple portal apps the user can access via the same account which all share the same message center. Some messages might link to an item in portal A, while others might link to items in portal B. This might seem a bit convoluted, but we have a very good reason for doing this which I can't explain in this question.

Answer 1

Figured it out!

First intercept the click event for links in the message content:

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

Then handle the link with the router if the link's host matches the current host:

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