在降价链接中使用角度路由器答案

【问题标题】：Use angular router inside markdown links在降价链接中使用角度路由器
【发布时间】：2018-08-09 10:22:41
【问题描述】：

我正在使用 ngx-markdown 来呈现我的常见问题解答，其中包含指向外部资源（以 http 开头）和内部资源（以 / 开头）的链接。

我想将角度路由器传递给我的标记选项工厂，以便将其用于本地资源。

有没有办法在导入模块时在装饰器中传递角度路由器：

imports: [
    [...]
    MarkdownModule.forRoot({
        provide: MarkedOptions,
        useFactory: markedOptionsFactory,
    }),
    [...]
],

仅供参考，我的markedOptionsFactory 看起来像：

export function markedOptionsFactory(): MarkedOptions {
    const renderer = new MarkedRenderer();

    renderer.link = (href: string, title: string, text: string) => {
        const isLocalLink = /^\//.test(href);
        const target = isLocalLink ? '_self' : '_blank';
        const hrefContent = isLocalLink ? `javascript:router.navigateByUrl('${href}')` : href;

        return `<a href="${hrefContent}" target="${target}">${text}</a>`;
};

    return {
        renderer: renderer,
        [...]
    };
}

【问题讨论】：

你找到解决办法了吗？
@maxime1992，我在下面找到了解决方法，希望对您有所帮助。
谢谢！亚历山大你可以检查那个对我有帮助的答案:) github.com/jfcere/ngx-markdown/issues/…

标签： angular markdown

【解决方案1】：

我没有找到 Angular 的直接解决方案。我必须从marked.js 创建一个自定义事件，然后在DOM 树中更高的位置捕获它。

这里有一些我的工作代码：

首先：从链接触发事件（而不是默认的路由行为）

renderer.link = (href: string, title: string, text: string) => {
  const isLocalLink = /^\//.test(href);

  let hrefContent;
  if (isLocalLink) {
    hrefContent = `javascript:document.dispatchEvent(new CustomEvent('routeTo', {detail: '${href}'})); void(0)`;
  } else {
    hrefContent = href;
  }

  return `<a href="${hrefContent}">${text}</a>`;
};

然后：从可能的最高组件/模块中捕获该事件：

this.window.document.addEventListener('routeTo', (e: CustomEvent) => {
  e.preventDefault();
  router.navigateByUrl(e.detail);
}, false);

小心使用 Internet Explorer，您将需要一个用于自定义事件的 polyfill

【讨论】：

【解决方案2】：

你可以关注this answer 希望这会有所帮助！

【讨论】：