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

マイクロンクは言ったように、ComponentFactoryResolver（DynamicComponentResolverではない、それは存在しません）を使用してコンポーネントを動的に作成することができます。 （例えば、https://stackoverflow.com/a/36566919/1153681）。

• あなたは全体のコンポーネントを作成する必要はありませんが、唯一の既存のコンポーネントにマークアップの作品を追加します。

  しかし、それはので、あなたの状況では動作しません。

• あなたはマークアップを作成する人ではありません、ag-gridです。

あなたはグリッドグリッドなので、Angular'sの代わりにag-gridのAPIを使用してみませんか？ their docsを簡単に見ると、グリッドにはセルがクリックされたときに呼び出される関数コールバックをとるプロパティonCellClicked(params)があります。

次に、そのコールバックからAngularコードをトリガーすることをお勧めします。

Answer 3

動的角型コンポーネントをag-gridで使用する場合は、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 { 
} 

をボタンをクリックすると、動的に2つの構成要素の間で切り替えることができます - これは明らかにあなたが持っているいくつかの条件に基づいて実行時に行うことができます。

注あまりにもあなたが一つの構成要素を持っているため、それは単純かもしれないし、実際の出力に条件ロジックを行うこと - 例えば：

// 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を使用する方法の詳細情報を見つけることができますグリッドのクリックイベントをサポートするコンポーネントの使用例については、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、またはangular cliでパッケージ化する方法もあります。