Javascript 将模板添加为innerHTML时Angular 2绑定/事件不起作用
我试图创建一个可配置的可重用表。可以将单元格配置为具有html模板 我正在配置列“Review”以使html模板具有带有click事件(Review(row))的锚定标记 到目前为止,我尝试将此模板作为innerHTML插入,但没有任何角度绑定可以工作。然后我尝试创建一个动态调用的组件(review.component.ts),但是这个组件在第一行只调用了一次。此外,我没有找到任何方法将当前行项目传递给单击EventReview(行)(inside review.component.ts) employee.component.ts:Javascript 将模板添加为innerHTML时Angular 2绑定/事件不起作用,javascript,angular,angular2-template,Javascript,Angular,Angular2 Template,我试图创建一个可配置的可重用表。可以将单元格配置为具有html模板 我正在配置列“Review”以使html模板具有带有click事件(Review(row))的锚定标记 到目前为止,我尝试将此模板作为innerHTML插入,但没有任何角度绑定可以工作。然后我尝试创建一个动态调用的组件(review.component.ts),但是这个组件在第一行只调用了一次。此外,我没有找到任何方法将当前行项目传递给单击EventReview(行)(inside review.component.ts) em
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);
}
}
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);
}
}
import {Cell} from './cell';
export class DataTable {
rows: Array<any>;
cells: Cell[];
}
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;
}
}
}
<table>
<tbody>
<tr *ngFor="let row of dataTable.rows">
<td *ngFor="let cell of dataTable.cells" [innerHTML]="bindCell(cell, row)">
</td>
</tr>
</tbody>
</table>
data\u table.html:
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);
}
}
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);
}
}
import {Cell} from './cell';
export class DataTable {
rows: Array<any>;
cells: Cell[];
}
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;
}
}
}
<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
如注释中所述,另一种方法是将HTML包装在组件中并动态添加此组件DynamicComponentLoader
(如问题注释中的链接答案所示)已被弃用。它被替换为ViewContainerRef.createComponent()
。显示了如何使用它的示例。这可能会有所帮助,