Question

我正在使用ngx-markdown来呈现我的FAQ，在其中，我已链接到外部资源（从http开始）和内部资源（从/开始）。

我想将角形路由器传递给我的markedOptionsFactory，以便将其用于本地资源。

导入模块时是否可以在装饰器中传递有角路由器：

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,
        [...]
    };
}

Answer 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）

Answer 2

您可以关注 this answer

希望这会有所帮助！

通过QAL

在Markdown链接中使用角度路由器

2 个答案: