Динамически внедрить компонент в динамически добавленные элементы в Angular2 и Gridster2

Я использую библиотеку angular-gridster2 для добавления элементов на страницу. Я хочу загрузить контент в эти элементы, которые добавляются. Элементы размещаются через ngFor и добавлены / удалены через сервис. Я смотрел на ComponentFactoryResolver а также componentRef для загрузки динамического контента, но все учебники показывают, как сделать это в одной статической цели, используя что-то вроде <div #container></div>, Тем не менее, мой это:

<div id="grid">
    <gridster [options]="options">
    <gridster-item [item]="item" *ngFor="let item of dashboard;let i = index;">
      <div class="grid-header drag-handle">
        <span class="handle-icon"><i class="material-icons">open_with</i></span>
        <span class="close-icon" (click)="removePanel(item)"><i class="material-icons">close</i></span>
      </div>

У меня есть компонент для выбора "навигации", который добавляет элемент на страницу, которую я хочу передать, а также тип, который определяет, что динамически загружается в добавленный элемент. В настоящее время я прохожу размер (click)="add(large)" который помещает массив "большого" размера на сервер для размещения элемента на странице:

  add(size,type){
    size = size || 'default';

    let newSize = this.sizeOptions[size];

    if(!this.gridElements.options.api.getNextPossiblePosition(newSize)) {
      alert('hey, no can do, buddy!');
      return false;
    }

    let tDate = new Date();

    let tSize = {
      ...newSize
    };

    this.dashboard.push(tSize);
    this.gridElements.changeGrid(this.dashboard);
  }

мой app.component.html выглядит так:

<mat-sidenav-container>
    <div id="page-content">
        <app-header></app-header>
        <app-navigation></app-navigation>
        <app-grid></app-grid>
        <app-alerts #alertwindow2></app-alerts>
    </div>
</mat-sidenav-container>

Снова, app-navigation а также app-grid связаны через grid-component.service чтобы позволить add в навигации, чтобы передать элемент, добавленный в grid, Я хочу разместить динамический компонент на каждом элементе сетки, указанном в клике, например (click)="add('large','comp1')" затем передает это службе, которая, в свою очередь, обрабатывает запрос и загружает содержимое во вновь созданный элемент сетки.

0 ответов

Другие вопросы по тегам