Drag and Drop Динамически добавляемый компонент - angular 7 - PullRequest
Новая
       32

Drag and Drop Динамически добавляемый компонент - angular 7

0 голосов
/ 17 апреля 2020

Я добавляю динамический компонент c, используя viewRef и распознаватель фабрики компонентов, я мог бы создать создание динамического c. Теперь мне нужно добавить функцию перетаскивания для каждого компонента, добавляемого индивидуально 

<button type="button" (click)="createComponent()">
 Create Widget
</button>
<div cdkDropList (cdkDropListDropped)="drop($event)" [cdkDropListData]="components" >
  <div cdkDrag>
      <ng-container #container ></ng-container>
  </div>
</div>

TS-файл для добавления компонента 

createComponent() {
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      DemoComponent
    );
    let componentRef: ComponentRef<
      DemoComponent
    > = this.container.createComponent(componentFactory);
    let currentComponent = componentRef.instance;

    currentComponent.selfRef = currentComponent;
    currentComponent.type = ++this.index;
    currentComponent.type1 = ++this.heleloIndex;

    currentComponent.index = ++this.index;

    // prividing parent Component reference to get access to parent class methods
    currentComponent.compInteraction = this;

    // add reference for newly created component
    this.components.push(componentRef);
  }

Код в дочернем компоненте 

<h1>Alert {{type}}</h1>
<h2>Alert {{type1}}</h2>

<button (click)="change()">change Widget data
</button>

<button (click)="removeMe(index)">Remove Widget
</button>
<hr>

Метод перетаскивания 

 public drop(event: CdkDragDrop<any[]>) {

    console.log(event);

    moveItemInArray(this.components, event.previousIndex, event.currentIndex);
    console.log(event.container.data);
  }

Теперь я могу перетащить компонент. Но это относится ко всему div. Мне нужно перетаскивать отдельные блоки ПРИМЕЧАНИЕ: я не использую ngFor

Пример изображения Заранее всем спасибо:)

...