首页 文章

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

提问于
浏览 次
2

我有一个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>';
   }
}
angular angular2-routing angular2-template angular2-directives

1 回答

  • 2

    我会保持简单 .

    如果可能的话，用 <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 属性而不是我的示例 .

    回复于

相关问题