将模板添加为innerHTML 时，Angular 2 绑定/事件不起作用 [英] Angular 2 binding/events not working when adding template as innerHTML

问题描述

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

I am trying to create a reusable table which can be configurable. The cells can be configured to have html template.

我正在配置评论"列，使其具有带有点击事件(评论(行))的锚标记的 html 模板.

I am configuring the column "Review" to have html template with anchor tag with click event (review(row)).

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

So far I tried to insert this template as innerHTML, but then none of the angular binding works. Then I tried to create a dynamically invoked component (review.component.ts) but this component invoked only once for first row. Moreover I didn't find any way to pass the current row item to click event review(row) (inside 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>

推荐答案

Angular 不处理使用 innerHtml(还有 ElementRef.nativeElement.append(...) 添加的 HTML)代码>或类似)以任何方式.

Angular doesn't process HTML added using innerHtml (also ElementRef.nativeElement.append(...) or similar) in any way.

如评论中所述，另一种方法是将 HTML 包装在组件中并动态添加此组件.DynamicComponentLoader(如您问题的评论中的链接答案所示)已弃用.它被替换为 ViewContainerRef.createComponent().用户点击选择组件的Angular 2动态标签 显示了如何使用它的示例.

As mentioned in the comment an alternative is to wrap the HTML in a component and add this component dynamically. DynamicComponentLoader (as shown in the linked answer from the comment to your question) is deprecated. It was replaced by ViewContainerRef.createComponent(). Angular 2 dynamic tabs with user-click chosen components shows an example how to use it.

这篇关于将模板添加为innerHTML 时，Angular 2 绑定/事件不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！