Angular 2 能否解析从外部 CMS 接收到的链接以解析为内部链接 [英] Can Angular 2 parse links received from external CMS to be resolved as internal

问题描述

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

例如:

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

会发生什么:

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

我们希望发生的事情:

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

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

解决方案

你发布已经有一段时间了，但我自己没有找到解决方案，所以想创建这个作为未来的参考.

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

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

import { Directive, ElementRef, HostListener } from '@angular/core';从@angular/router"导入{路由器}；声明让窗口:任何；声明让文件:任何；@指示({选择器:'[appRouteDirective]'})导出类 RouterLinkDirective {公共主机名 = '.hyglo.se';//起始点也避免了电子邮件链接构造函数(私有 el:ElementRef，私有路由器:路由器){}@HostListener('click', ['$event'])公开点击(e){const href = e.target.getAttribute('href');if (e.target.tagName === 'A' && href) {e.preventDefault();如果(this.isLocalLink(href)){this.router.navigate([this.getPathFromURL(href)]);} 别的 {window.open(e.target.href);}}}公共 getPathFromURL(网址:字符串){让 el = document.createElement('a');el.href = url;返回 el.pathname;}公共 isLocalLink(uri: string) {if (uri && (uri.startsWith('/') || uri.includes(this.hostname))) {返回真；} 别的 {返回假；}}}

We are working on a decoupled project with Drupal as our backend and Angular as our front-end. Everything is nearing completion but certain (dynamic, as in created in Drupal) pages require links to different pages of the angular app.

For example:

1. An editor creates an FAQ question in Drupal with an answer containing a link to the Pricing page of the angular app. (Q: How much does this service cost? A: Check out our [pricing] page)
2. User on frontend opens FAQ page
3. Angular loads our FAQ page (html) from Drupal via REST
4. User clicks link mentioned in step 1

What happens:

The entire page gets reloaded, losing any processes that were currently going on (i.e. content playing in a player), and having the user look at our loading screen for a bit again.

What we would like to happen:

We would like to trigger the router to go to an internal URL so we don't lose our SPA feeling. We have tried to replicate this by using Dynamic Components, but since we have no idea before hand what the content looks like it's hard to implement this.

Is there an official way (or workaround perhaps) to fix this ? We imagined we could do it by either parsing any links we get from our CMS, or making a custom formatting in our CKeditor to parse. But once we get to the angular side, we don't know how we should insert our HTML with the links now working internally.

解决方案

It's been a while since you posted but I didn't find a solution myself so wanted to create this as a future reference.

We solved this problem by using a Directive that we use on the html like so:

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

The Directive captures all clicks and checks if the target is an tag with a href element. If the href is relative, use the router. If it contains hostname (set your own) it gets the path and uses the router. Otherwise it opens in a new window.

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

这篇关于Angular 2 能否解析从外部 CMS 接收到的链接以解析为内部链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！