角度：.tsファイルからHTMLをレンダリングする方法は？

Question

リストビューのデータを表示するためにjQuery dataTableを使用しました。そして私はdataTableに以下の方法でデータをバインドしようとしました。機能上users.component.ts

getUsers() { 
    this.UserService.getUsersList() 
     .subscribe(
     success => { 
      this.userList = success; 
      $("#userTable").find('tbody').empty(); 
      var dataClaims = this.userList; 
      for (let i = 0; i < dataClaims.length; i++) { 
       $('#userTable').dataTable().fnAddData([ 
        (i + 1), 
        dataClaims[i].name, 
        dataClaims[i].email, 
        dataClaims[i].contact_number, 
        dataClaims[i].address, 
        '<a [routerLink]="[' +"'"+"../../user/update" +"'" +']"' + ' class="fa fa-1x fa-pencil-square-o"></a>', 
       ]); 
      } 
     } 
     ); 
} 

で

が正常に動作しているとのdataTableは問題なく働いています。

ただし、[routerLink]は、に変換されません。出力上では、

<a [routerlink]="['../../user/update']" class="fa fa-1x fa-pencil-square-o"></a> 

を次のように表示されている。しかし、

<a _ngcontent-c0="" ng-reflect-router-link="user/update" href="/user/update" class="fa fa-1x fa-pencil-square-o"></a> 

は、誰かがからHTMLデータをレンダリングする際に、通常のリンクに[routerlink]を変換する方法を説明してもらえ、次のように変換する必要があります。 TSファイル。ありがとうございました。あなたが本当にのdataTableを使用したい場合は、多分これはあなたのために役立つことができ

Answer 1

：

https://stackoverflow.com/a/38983367/2624360

基本的に、あなたのdataTableのロジックをカプセル化指令を作成する必要があります。

import {Directive, ElementRef} from '@angular/core'; 
import {Input, OnInit}   from '@angular/core'; 


import { JqueryDataTableEvent } from './jquery-datable-event'; 
import 'jquery.dataTables'; 

declare var jQuery:any; 

@Directive({ 
    selector: '[jqueryDatatable]' 
}) 

export class JqueryDatatableDirective implements OnInit { 
    private _datatable : any; 

    @Input() 
    jqueryDatatable: any; 

    @Input() 
    dataTableEvents: JqueryDataTableEvent[]; 

    constructor(private _element: ElementRef) {} 

    ngOnInit() { 
     this.applyOptions(); 
     this.applyEvents(); 
    } 

    applyOptions() 
    { 
     if (!this.jqueryDatatable) 
      console.error("Empty options array was passed to initialize jqueryDatatable."); 

     this._datatable = jQuery(this._element.nativeElement).DataTable(this.jqueryDatatable || {}); 

    } 

    applyEvents() { 
     this.dataTableEvents.map((event)=> { 
      this._datatable.on(event.eventName, event.selector, event.callback) 
     }); 
    } 
} 

誰か（@ DarioN1）これを作成し、例：

https://plnkr.co/edit/t0Zwc3AtQTt98XvIirZ9?p=preview

Answer 2

あなたは角度your HTML is safeことを伝える必要があります。import DomSanitizer

を。
1. ComponentコンストラクタにDomSanitizerを挿入します。
2. あなたのリンクをbypassSecurityTrustHtmlにラップします。

import { DomSanitizer } from '@angular/platform-browser'; 
 
    
 
export class UserComponent { 
 
    constructor(private sanitizer: DomSanitizer) {} 
 

 
    getUsers() { 
 
    this.UserService.getUsersList() 
 
     .subscribe(
 
     success => { 
 
      this.userList = success; 
 
      $("#userTable").find('tbody').empty(); 
 
      var dataClaims = this.userList; 
 
      for (let i = 0; i < dataClaims.length; i++) { 
 
       $('#userTable').dataTable().fnAddData([ 
 
        (i + 1), 
 
        dataClaims[i].name, 
 
        dataClaims[i].email, 
 
        dataClaims[i].contact_number, 
 
        dataClaims[i].address, 
 
        this.sanitizer.bypassSecurityTrustHtml('<a [routerLink]="[' +"'"+"../../user/update" +"'" +']"' + ' class="fa fa-1x fa-pencil-square-o"></a>'), 
 
       ]); 
 
      } 
 
     } 
 
    ); 
 
    } 
 
}

Answer 3

[routerLink]は動作しません。 innerHTMLの機能を使用する必要があります。

TSファイル： -

tool = '<a href="../../user/update" class="fa fa-1x fa-pencil-square-o">View</a>'; 

htmlファイル： -

<div [innerHTML]="tool"></div> 

出力： -

<div _ngcontent-c1=""><a href="../../user/update" class="fa fa-1x fa-pencil-square-o">View</a></div>