javascript - Angular 2 能否解析从外部 CMS 接收的链接以解析为内部链接

Question

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

例如:

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

会发生什么:

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

我们希望发生的事情:

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

是否有官方方法(或解决方法)来解决此问题？我们想象我们可以通过解析我们从 CMS 获得的任何链接，或者在我们的 CKeditor 中制作自定义格式来解析来做到这一点。但是一旦我们到达 Angular ，我们就不知道我们应该如何插入我们的 HTML 链接现在在内部工作。

Answer 1

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

我们通过使用我们在 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;
    }
  }
}