如何在innerHTML中使用routerLink

Question

我正在使用 Angular 6。我只想通过使用innerHTML. 我尝试了以下代码，但它不起作用。在组件文件中，我在构造函数里面写了如下代码：

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

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

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

Answer 1

在遇到与您相同的问题时，我使用了一种 hacky 解决方案，因为我没有找到更好的解决方案。在模板中span，我设置innerHtmlhtml 来自服务器，它可以有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 特定标记（属性或值绑定、组件、指令、管道等）的 HTML，需要添加动态模块并在运行时编译组件。这个答案提供了更多详细信息如何使用/创建动态模板来使用 Angular 2.0 编译动态组件？