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

Question

我有一个Angular 2组件，当某些用户操作时，从数据库加载html。该html包含相对路径的锚点标签。考虑到我不希望用户单击链接时重新加载整个应用程序，我尝试使用routerLink指令；但是，由于此html是动态加载的，因此不会处理routerLink。该html不会包含任何其他angular指令。最简单的方法是什么？请参见下面的示例。

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>';
   }
}

- darasd

---

为什么你不能在指令*ngIf中显式地放置锚点，并在单击事件被调用时将锚点设置为true？ - alehn96

问题在于HTML是在运行时生成而不是设计时，这意味着任何Angular指令都不会被处理。 - darasd

请查看此链接 https://angular.io/api/common/NgTemplateOutlet - alehn96

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 属性，而不是我的示例即可。

- Reactgular

---

数据属性被innerHTML指令剥离了。我不得不添加一个管道来绕过这个问题。 - darasd