Как динамически / статически загрузить гридстер при нажатии на кнопку?

Question

Я новичок в угловых gridster2. Я хотел бы знать важный код для "как динамически и статически загружать гридстер при нажатии кнопки". Например, у меня на странице пользовательского интерфейса есть кнопка "Выбор макета", и когда я выбираю опцию "4×1", сетки должны загружаться динамически в соответствии с выбранной опцией. Пожалуйста, помогите мне с этим. Как мы можем сделать это, используя Angular 2?

Answer 1

Вы можете использовать ndc-dynamic пакет, это мой способ реализовать

HTML

<gridster id="dashboard" #dashboard [options]="options" (drop)="onDrop($event)" class="transparent">
   <gridster-item #gridsterItem[item]="item" *ngFor="let item of dashboardArray">
    <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" [ndcDynamicInputs]="item.input"
                    ></ndc-dynamic>
            </gridster-item>
</gridster>

TS

onDrop событие

this.dashboardArray.push({
                    rows: 4,
                    cols: 4,
                    x: 0,
                    y: 0,
                    componentType: DashboardComponentType.Grid,
                    input: {
                        chartId: '',
                        dashboardId: this.dashboardId,
                    },
                    component: GridChartComponent,
                    name: "GridChart"
})