如何在 Angular 2 中动态加载和显示包含 routerLink 指令的 html？

Question

我有一个 Angular 2 组件，它通过一些用户操作从数据库加载 html。 html 包含具有相对路径的锚标记。鉴于我不希望在用户单击链接时重新加载整个应用程序，我正在尝试使用 routerLink 指令；但是，由于此 html 是动态加载的，因此不会处理 routerLink。 html 将不包含任何其他角度指令。实现这一目标的最简单方法是什么？请参阅下面的示例。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
             <p><a (click)="GetTextFromDatabase()">Get data from database</a> which should contain a <a routerLink="/some-route">working link</a></p>
             <div [innerHTML]="data"></div>
             <router-outlet></router-outlet>`,
})
export class AppComponent  {
   name: string = 'Angular';
   data: string;

   private GetTextFromDatabase(): void {
      this.data = '<p>here is my paragraph containing a <a routerLink="/some-route">link</a>';
   }
}

Answer 1

我会保持简单。

如果可能，将链接替换为<span> 标签并使用 CSS 使它们看起来像链接。将它们重写为<span data-link="/some-route">link</span>。

在您的模板中使用点击监听器：

<div [innerHTML]="data" (click)="onDataClick($event)"></div>

在您的组件中读取点击目标：

public onDataClick(event: Event) {
      if(event.target.tagName.toLowerCase() === 'span') {
          const link = event.target.getAttribute('link');
          // call the router to navigate to the new route
          console.log(link)
      }
}

这应该足以让链接正常工作。

从技术上讲，您实际上不必将标签重写为<span>。 <a routerLink=""> 也可以工作，因为它没有 href 属性来触发浏览器 URL 更改。只需阅读 routerLink 属性而不是我的示例。