将模板添加为 innerHTML 时，Angular 2 绑定/事件不起作用

Posted 2023-05-07

【中文标题】将模板添加为 innerHTML 时，Angular 2 绑定/事件不起作用

【英文标题】：Angular 2 binding/events not working when adding template as innerHTML

【发布时间】：2019-05-08 22:57:09

【问题描述】：

我正在尝试创建一个可配置的可重用表。可以将单元格配置为具有 html 模板。

我正在将“评论”列配置为带有带有点击事件（评论（行））的锚标记的html模板。

到目前为止，我尝试将此模板作为 innerHTML 插入，但没有任何角度绑定起作用。然后我尝试创建一个动态调用的组件（review.component.ts），但该组件只为第一行调用了一次。此外，我没有找到任何方法将当前行项传递给单击事件 review(row)（在 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>

【问题讨论】：

这可能会有所帮助，***.com/questions/34784778/…

【参考方案1】：

Angular 不会以任何方式处理使用 innerHtml（也包括 ElementRef.nativeElement.append(...) 或类似名称）添加的 HTML。

正如评论中提到的，另一种方法是将 HTML 包装在一个组件中并动态添加该组件。 DynamicComponentLoader （如您问题的评论中的链接答案所示）已被弃用。它被ViewContainerRef.createComponent() 取代。 Angular 2 dynamic tabs with user-click chosen components 展示了如何使用它的示例。