5.20201.663
WjComponentLoader Wijmo API クラス

WjComponentLoader クラス

他のコンポーネントを動的にロードするためのAngular コンポーネント。

任意のコンポーネントクラスのインスタンスを作成してロードするには、wj-component-loader コンポーネントの代わりにwj-component-loader コンポーネントを使用します。 また、インスタンス化されたコンポーネントに一連のプロパティ値を渡すこともできます。

wj-component-loaderコンポーネントを使用してインスタンス化される各コンポーネントクラスは、 アプリケーションの@NgModuleデコレータの entryComponents 配列で宣言する必要があります。

以下の例では、データモデル内の列定義配列で動的に生成された列を持つFlexGridを示しています。 列定義には、セルテンプレートとして使用できるコンポーネントクラスへの 参照をオプションで含めることができます。 wj-component-loader コンポーネントは、セルテンプレート内のそのような コンポーネントをインスタンス化するために使用されます。

HTML
 
<wj-flex-grid #flex [itemsSource]="data">
 <wj-flex-grid-column *ngFor="let col of columns"
            [header]="col.header"
            [binding]="col.binding"
            [format]="col.format"
            [width]="col.width">
        <ng-template *ngIf="col.cellTemplate"
              wjFlexGridCellTemplate [cellType]="'Cell'"
              let-cell="cell">
         <wj-component-loader [component]="col.cellTemplate"
                 [properties]="{item: cell.item}">
         </wj-component-loader>
        </ng-template>
    </wj-flex-grid-column>
</wj-flex-grid>
 
 
TypeScript
 
@Component({
...
})
export class AppCmp {
    columns: any[];

    constructor() {
        this.columns = [
            { header: 'Product', binding: 'product' },
            { header: 'Revenue', binding: 'amount', format: 'n0' },
            {
                header: 'Expense',
binding: 'amount2',
cellTemplate: ExpenseCellCmp
            }
        ];
    }
}

@Component({
...
})
export class ExpenseCellCmp {
    item: any;
}
 
@NgModule({
    imports: [CommonModule, WjGridModule],
    declarations: [AppCmp],
    entryComponents: [ExpenseCellCmp]
})

階層

  • WjComponentLoader

プロパティ

プロパティ

component

component: any

wj-component-loader コンポーネントを使用してインスタンス化されるコンポーネントクラスの参照を取得または設定します。

wj-component-loaderコンポーネントを使用してインスタンス化される各コンポーネントクラスは、 アプリケーションの@NgModuleデコレータの entryComponents 配列で宣言する必要があります。

properties

properties: Object

インスタンス化されたコンポーネントを初期化するために使用される プロパティの名前と値のペアを持つオブジェクトを取得または設定します。