如何使角度點擊綁定工作使用字符串來創建DOM元素？

Question

我應該如何使動態添加的DOM元素角度綁定工作？我正在使用ag-grid (ng2)作爲數據表。 基於某些條件，我使用不同的列渲染。

 columnDef.cellRenderer = function (params) { 
     return `<div><i class='fa ${params.value}'></i></div>`; 
     }; 

在此，我想點擊功能添加到這樣的圖標：

 columnDef.cellRenderer = function (params) { 
     return `<div><i (click)='iconClicked()' class='fa ${params.value}'></i></div>`; 
     }; 

如何使這些angular 2工作click bindings？

Answer 1

你可以建立組件Equivalent of $compile in Angular 2動態喜歡解釋能夠與角度通過HTML事件和值綁定。

，或者您可以使用命令式的事件綁定

export class MyComponent { 
    constructor(private elRef:ElementRef) {} 

    someMethod() { 
    columnDef.cellRenderer = (params) => { 
     return `<div><i id="addClick" class='fa ${params.value}'></i></div>`; 
     this.elRef.nativeElement.querySelector('#addClick') 
     .addEventListener('click', this.iconClicked.bind(this)); 
    }; 
    } 

    iconClicked(e) { 
    } 
} 

Answer 2

正如micronyks所說，您可以使用ComponentFactoryResolver（不是DynamicComponentResolver，它不再存在）動態地創建組件，您可以在S.O上找到示例。 （例如https://stackoverflow.com/a/36566919/1153681）。

但它不會在你的情況下工作，因爲：

• 你不想創建一個完整的組成部分，但只有一塊標記添加到現有的組件。
• 你不是創建標記的人，ag-grid是。

由於您在ag-grid上下文中，爲什麼不使用ag-grid的API而不是Angular的？快速查看their docs可以看出，網格有一個屬性onCellClicked(params)，它接受一個函數回調，當單擊一個單元格時會調用該回調函數。

然後希望你可以從該回調中觸發一些Angular代碼。

Answer 3

如果您想在Ag-Grid中使用動態的Angular 2組件，則不需要直接使用ComponentFactoryResolver - 您可以使用ag-grid提供的Angular 2接口。

比方說，你有以下幾個簡單的組件：

// CubeComponent 
import {Component} from '@angular/core'; 
import {AgRendererComponent} from 'ag-grid-ng2/main'; 

@Component({ 
    selector: 'cube-cell', 
    template: `{{valueCubed()}}` 
}) 
export class CubeComponent implements AgRendererComponent { 
    private params:any; 
    private cubed:number; 

    // called on init 
    agInit(params:any):void { 
     this.params = params; 
     this.cubed = this.params.data.value * this.params.data.value * this.params.data.value; 
    } 

    public valueCubed():number { 
     return this.cubed; 
    } 
} 

// Square Component 
import {Component} from '@angular/core'; 

import {AgRendererComponent} from 'ag-grid-ng2/main'; 

@Component({ 
    selector: 'square-cell', 
    template: `{{valueSquared()}}` 
}) 
export class SquareComponent implements AgRendererComponent { 
    private params:any; 

    agInit(params:any):void { 
     this.params = params; 
    } 

    public valueSquared():number { 
     return this.params.value * this.params.value; 
    } 
} 

// from-component.component.html 
<div style="width: 200px;"> 
    <button (click)="changeComponentType()">Change Component Type</button> 
    <ag-grid-ng2 #agGrid style="width: 100%; height: 350px;" class="ag-fresh" 
       [gridOptions]="gridOptions"> 
    </ag-grid-ng2> 
</div> 

// from-component.component.ts 
import {Component} from '@angular/core'; 

import {GridOptions} from 'ag-grid/main'; 
import {SquareComponent} from "./square.component"; 
import {CubeComponent} from "./cube.component"; 

@Component({ 
    moduleId: module.id, 
    selector: 'ag-from-component', 
    templateUrl: 'from-component.component.html' 
}) 
export class FromComponentComponent { 
    public gridOptions:GridOptions; 
    private currentComponentType : any = SquareComponent; 

    constructor() { 
     this.gridOptions = <GridOptions>{}; 
     this.gridOptions.rowData = this.createRowData(); 
     this.gridOptions.onGridReady =() => { 
      this.setColumnDefs(); 
     } 
    } 

    public changeComponentType() { 
     this.currentComponentType = this.currentComponentType === SquareComponent ? CubeComponent : SquareComponent; 
     this.setColumnDefs(); 
    } 

    private createRowData() { 
     let rowData:any[] = []; 

     for (var i = 0; i < 15; i++) { 
      rowData.push({ 
       value: i 
      }); 
     } 

     return rowData; 
    } 

    private setColumnDefs():void { 
     this.gridOptions.api.setColumnDefs([ 
      { 
       headerName: "Dynamic Component", 
       field: "value", 
       cellRendererFramework: this.currentComponentType, 
       width: 200 
      } 
     ]) 
    } 
} 

// app.module.ts 
import {NgModule} from "@angular/core"; 
import {BrowserModule} from "@angular/platform-browser"; 
import {RouterModule, Routes} from "@angular/router"; 
// ag-grid 
import {AgGridModule} from "ag-grid-ng2/main"; 
// application 
import {AppComponent} from "./app.component"; 
// from component 
import {FromComponentComponent} from "./from-component.component"; 
import {SquareComponent} from "./square.component"; 
import {CubeComponent} from "./cube.component"; 

const appRoutes:Routes = [ 
    {path: 'from-component', component: FromComponentComponent, data: {title: "Using Dynamic Components"}}, 
    {path: '', redirectTo: 'from-component', pathMatch: 'full'} 
]; 

@NgModule({ 
    imports: [ 
     BrowserModule, 
     RouterModule.forRoot(appRoutes), 
     AgGridModule.withComponents(
      [ 
       SquareComponent, 
       CubeComponent, 
      ]) 
    ], 
    declarations: [ 
     AppComponent, 
     FromComponentComponent, 
     SquareComponent, 
     CubeComponent 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

這裏的按鈕，可以動態地在兩個組件之間切換 - 這可能明顯在運行時根據你有一定的條件下進行。

還要注意，這可能是簡單的讓你有一個組件，並在實際輸出做條件邏輯 - 例如：

// called on init 
agInit(params:any):void { 
    this.params = params; 

    if(this.params.isCube) { 
     // cubed 
     this.value = this.params.data.value * this.params.data.value * this.params.data.value; 
    } else { 
     // square 
     this.value = this.params.data.value * this.params.data.value; 
    } 
} 

你可以找到關於如何使用角2的更多信息ag-Grid here：https://www.ag-grid.com/best-angular-2-data-grid

有了這個功能，您可以參考https://github.com/ceolter/ag-grid-ng2-example/blob/master/systemjs_aot/app/clickable.component.ts瞭解使用支持網格中的點擊事件的組件的示例。對於所有的例子在https://github.com/ceolter/ag-grid-ng2-example它提供了許多例子，一起看看如何將它們打包到了要麼systemjs，的WebPack或角CLI