當將模板添加爲innerHTML時，角度2綁定/事件不起作用

Question

我正在嘗試創建可以配置的可重用表。單元格可以配置爲具有html模板。

我正在配置「評論」列以使html模板帶有點擊事件（評論（行））的定位標記。

到目前爲止，我試圖將這個模板作爲innerHTML插入，但沒有任何角度綁定工作。然後我嘗試創建一個動態調用的組件（review.component.ts），但該組件僅對第一行調用一次。此外，我沒有找到任何方式來傳遞當前行項目點擊事件審查（行）（在review.component.ts內）。

employee.component.ts：

import { Component, OnInit, DynamicComponentLoader, ElementRef, Inject, Injector} from '@angular/core'; 
import { CORE_DIRECTIVES } from '@angular/common'; 
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {DataTableComponent} from '../../data_table/data_table.component'; 
import {DataTable} from '../../data_table/dataTable'; 
import {Cell} from '../../data_table/cell'; 
import {ReviewComponent} from './review.component'; 

@Component({ 
    selector: 'employee', 
    templateUrl: './app/employee/employee.html', 
    directives: [DataTableComponent, ReviewComponent, RouterLink, RouterOutlet, ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

export class EmployeeComponent implements OnInit { 
    public tableConfig: DataTable; 
    public constructor(private dcl: DynamicComponentLoader, private elementRef: ElementRef, private injector: Injector) { 
     this.tableConfig = new DataTable(); 
     this.tableConfig.rows = [{ Sr: 1, Name: 'saurabh' }, { Sr: 2, Name: 'arun' }]; 
     var cellSr = new Cell(); 
     var cellName = new Cell(); 
     var cellReview = new Cell(); 
     cellSr.name = 'Sr'; 
     cellName.name = 'Name'; 

     //setting innerHtml directly doesn't work. Any way to make the bindings work in such case? 
     //cellReview.innerHtml='<a class="btn btn-default" (click)="review(row)">Review</a>' 

     cellReview.innerHtml = '<div class="child"></div>'; 
     this.tableConfig.cells = [cellSr, cellName, cellReview]; 
    } 
    ngOnInit() { 
     this.dcl.loadAsRoot(ReviewComponent, '.child', this.injector); 
    } 
} 

review.component.ts：

import { Component} from '@angular/core'; 
import { CORE_DIRECTIVES } from '@angular/common'; 
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 

@Component({ 
    selector: 'btn-review', 
    template: `<a class="btn btn-default" (click)="review(row)">Review</a>`, 
    directives: [RouterLink, RouterOutlet, ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 

export class ReviewComponent { 
    constructor() {} 
    public review(event){ 
     console.log(event); 
     console.log(2); 
    } 
} 

datatable.ts：

import {Cell} from './cell'; 
export class DataTable { 
    rows: Array<any>; 
    cells: Cell[]; 
} 

data_table.component.ts：

import { Component, Input } from '@angular/core'; 
import { CORE_DIRECTIVES } from '@angular/common'; 
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS, ROUTER_DIRECTIVES} from '@angular/router-deprecated'; 
import {TAB_DIRECTIVES} from 'ng2-bootstrap'; 
import {DataTable} from './dataTable'; 
import {Cell} from './cell'; 
@Component({ 
    selector: 'data-table', 
    templateUrl: './data_table/data_table.html', 
    directives: [RouterLink, RouterOutlet, ROUTER_DIRECTIVES], 
    providers: [ROUTER_PROVIDERS] 
}) 
export class DataTableComponent { 
    @Input() dataTable: DataTable; 
    bindCell(cell: Cell, row: any) { 
     var text = ''; 
     if (cell.innerHtml && cell.innerHtml.length > 0) { 
      return cell.innerHtml; 
     } 
    } 
} 

data_table.html：

<table> 
    <tbody> 
     <tr *ngFor="let row of dataTable.rows"> 
      <td *ngFor="let cell of dataTable.cells" [innerHTML]="bindCell(cell, row)"> 
      </td> 
     </tr> 
    </tbody> 
</table> 

Answer 1

角不處理HTML加入以任何方式使用innerHtml（也ElementRef.nativeElement.append(...)或類似的）。

正如在評論中提到的另一種方法是將HTML包裝到組件中並動態添加此組件。 DynamicComponentLoader（如評論與您問題的鏈接答案中所示）已被棄用。它被替換爲ViewContainerRef.createComponent()。 Angular 2 dynamic tabs with user-click chosen components顯示了一個如何使用它的例子。