如何在Angular 2中動態加載並顯示包含routerLink指令的html？

我有一個Angular 2組件，在某些用戶操作中，它從數據庫加載html。該html包含具有相對路徑的錨標籤。鑑於我不希望整個應用程序在用戶點擊鏈接時重新加載，我正在嘗試使用routerLink指令;但是，由於該html是動態加載的，因此不會處理routerLink。該html不會包含任何其他的角度指令。達到此目的最簡單的方法是什麼？看我下面的例子。如何在Angular 2中動態加載並顯示包含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>'; 
    } 
}

來源

2017-07-06 darasd

爲什麼你不能沒有把明確的錨用指令* ngIf，當事件點擊調用把真實的是，HTML在運行時，而不是設計時所產生的問題錨 – alehn96

，這意味着任何角度指令沒有處理 – darasd

看看這個https://angular.io/api/common/NgTemplateOutlet – alehn96

我只是保持簡單。

如果可能，請用<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屬性而不是我的示例。

來源

2017-07-06 13:41:41 cgTag

數據屬性被innerHTML指令剝離。我不得不添加一個管道來繞過這個。 – darasd

如何在Angular 2中動態加載並顯示包含routerLink指令的html？

回答

相關問題