Angular 2 可以解析从外部 CMS 收到的链接并将其解析为内部链接吗

我们正在开发一个解耦项目，以 Drupal 作为后端，Angular 作为前端。一切都已接近完成，但某些（动态的，如在 Drupal 中创建的）页面需要链接到角度应用程序的不同页面。

例如：

1. 编辑在 Drupal 中创建常见问题解答并附上答案 包含指向 Angular 应用程序的定价页面的链接。 （问：这项服务的费用是多少？答：查看我们的[定价]页面）
2. 前端用户打开常见问题解答页面
3. Angular 通过 REST 从 Drupal 加载我们的常见问题解答页面 (html)
4. 用户点击步骤 1 中提到的链接

会发生什么：

整个页面被重新加载，丢失当前正在进行的任何进程（即播放器中播放的内容），并让用户再次查看我们的加载屏幕。

我们希望发生什么：

我们希望触发路由器访问内部 URL，这样我们就不会失去 SPA 的感觉。 我们尝试使用动态组件来复制这一点，但由于我们事先不知道内容是什么样的，因此很难实现这一点。

有没有官方的方法（或者可能的解决方法）来解决这个问题？我们想象我们可以通过解析从 CMS 获得的任何链接，或者在 CKeditor 中进行自定义格式来解析来实现此目的。但是一旦我们到达角度一侧，我们不知道应该如何插入 HTML 以及现在在内部工作的链接。

自从您发布以来已经有一段时间了，但我自己没有找到解决方案，因此想创建它作为未来的参考。

我们通过在 html 上使用的指令解决了这个问题，如下所示：

<div [innerHTML]='contentFromCMS' appRouteDirective></div>

该指令捕获所有点击并检查目标是否是带有 href 元素的标签。如果 href 是相对的，则使用路由器。如果它包含主机名（设置您自己的），它将获取路径并使用路由器。否则它将在新窗口中打开。

import { Directive, ElementRef, HostListener } from '@angular/core';
import { Router } from '@angular/router';

declare let window: any;
declare let document: any;

@Directive({
  selector: '[appRouteDirective]'
})
export class RouterLinkDirective {
  public hostname = '.hygglo.se'; // The starting dot avoids email links as well

  constructor(private el: ElementRef, private router: Router) {}

  @HostListener('click', ['$event'])
  public onClick(e) {
    const href = e.target.getAttribute('href');
    if (e.target.tagName === 'A' && href) {
      e.preventDefault();
      if (this.isLocalLink(href)) {
        this.router.navigate([this.getPathFromURL(href)]);
      } else {
        window.open(e.target.href);
      }
    }
  }

  public getPathFromURL(url: string) {
    let el = document.createElement('a');
    el.href = url;
    return el.pathname;
  }

  public isLocalLink(uri: string) {
    if (uri && (uri.startsWith('/') || uri.includes(this.hostname))) {
      return true;
    } else {
      return false;
    }
  }
}