Question

我正在研究angular6。我只想通过使用innerHTML创建动态路由。我尝试了以下代码，但无法正常工作。在组件文件中，我在构造函数中编写了以下代码

this.anchor = "<a routerLink='login'>Dynamic Login</a>"

在模板文件中，我编写了以下代码

<div [innerHtml]="anchor"></div>

Answer 1

在遇到与您相同的问题时，我使用了一种hacky解决方案，因为我没有发现更好的解决方案。在模板中，我有span，其中我将innerHtml设置为html来自服务器，并且它可以具有a标签以及任何其他格式的html标签。因此解决方案是添加点击事件：

<span [innerHtml]="customHtml" (click)="processLinks($event)"></span>

然后在我们的ts文件中对其进行处理：

customHtml: string = 'Hey <a href="/help/">this is</a> a link';

// Don't forget to import and inject the router
constructor(private router: Router) {}

// ...

processLinks(e) {
  const element: HTMLElement = e.target;
  if (element.nodeName === 'A') {
    e.preventDefault();
    const link = element.getAttribute('href');
    this.router.navigate([link]);
  }
}

请注意，您可以使用此处的链接执行任何操作，如果需要，可以在导航到它们之前添加一些条件或转换链接。

希望有帮助。我知道这不是最好的解决方案，必须有更好的解决方案。但这就是我匆忙想到的。

Answer 2

this.anchor = "<a routerLink='login'>Dynamic Login</a>"

<div [innerHtml]="anchor"></div>

以上代码不会使Angular处理anchor中特定于Angular的任何内容。

Angular在生成时用生成的代码替换了特定于Angular的标记。 Angular不会处理在运行时添加的标记。

要添加包含Angular特定标记（属性或值绑定，组件，指令，管道等）的HTML，需要在运行时添加动态模块并编译组件。该答案提供了更多详细信息How can I use/create a dynamic template to compile dynamic Component with Angular 2.0?

Answer 3

我有同样的问题。我刚刚更换了<a routerLink="/something">Something</a>

到

<a href="#/something">Something</a>

效果很好

Answer 4

@Alex Chebotarsky 解决方案很好并且证明了这个概念。

我可以向您展示我如何将它用作长描述的管道，在您遇到更多链接的地方。

我创建了一个管道来用 {initialWord}

替换一些单词

docs.pipe.ts

@Pipe({ name: 'docs' })
export class DocsPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(value: string, item: IStack): SafeHtml {
    value = value.replace(DocsKeywords.language, `<a class="doc-type" [routerLink]="/tabs/search,${item.area[0]},${item.id}">${DocsKeywords.language}</a>`);
    value = value.replace(DocsKeywords.frontend, `<a class="doc-type" [routerLink]="/tabs/search,${item.area[0]},${item.id}">${DocsKeywords.frontend}</a>`);
    value = value.replace(DocsKeywords.framework, `<a class="doc-type" [routerLink]="/tabs/search,${item.area[0]},${item.id}">${DocsKeywords.framework}</a>`);

    return this.sanitizer.bypassSecurityTrustHtml(value);
  }
}

之后，我呈现的 HTML 和 DOM 如下所示：

然后在您使用它的组件中

some-component.html

<p class="description" [innerHtml]="item.longDescription | docs: item">

some-component.ts

  @HostListener('click', ['$event'])
  onClick(e) {
    if (e.target.classList.contains("doc-type")) {
      const urlSegments = e.target.getAttribute('[routerlink]').split(',');
      this.router.navigate(urlSegments);
    };
  }

Answer 5

我认为您必须像下面那样在路由器链接中附加/

this.anchor = "<a routerLink='/login'>Dynamic Login</a>"

没有斜杠/的情况下，它不会检测到路线

如何在innerHTML中使用routerLink

5 个答案: