Angular 7 - 向动态创建的组件添加拖放行为 [英] Angular 7 - Add drag and drop behaviour to dynamically created components

问题描述

这是我在 SO 上提出的上一个问题的延续:在组件选择器声明时添加指令 -角 7

我正在通过单击按钮动态创建组件.组件以类似列表的方式依次显示.我想引入拖放行为，以便用户可以在创建组件后重新排列它们.

在上一个问题中，我尝试使用 Angular-Material，但意识到可能无法将它用于组件，因为在组件的选择器标签中添加了cdkDrag"指令的问题，以及 cdkDropList和 cdkDrag 可能需要在同一个模板中.

我在模板中有一个 div:

<div #container></div>

而且，我正在按如下方式创建自定义组件:

@ViewChild('container', {read: ViewContainerRef})容器:ViewContainerRef；const childComponent = this.componentFactoryResolver.resolveComponentFactory(CustomComponent);const 组件 = this.container.createComponent(childComponent);

这很好用.是否有可能创建可拖动的动态创建的组件?

谢谢.

解决方案

更新

虽然这适用于单一类型的组件，但如果您需要使用不同的动态类型的组件，请阅读下方 Chaitanya Bangera 的评论！

原评论

应该使用这样的东西(CmpComponent 将是您要插入的组件):

 组件:CmpComponent[];const childComponent = this.componentFactoryResolver.resolveComponentFactory(CustomComponent);this.components.push(childComponent);drop(事件:CdkDragDrop){moveItemInArray(this.components, event.previousIndex, event.currentIndex);}

<div cdkDrag *ngFor="let cmp of components"><app-cmp></app-cmp>

This is in continuation of the previous question I asked on SO: Add directives to component selector when it is declared - Angular 7

I am dynamically creating components on a button click. The components are displayed one below another in a list like manner. I want to introduce drag-drop behaviour so that the user can rearrange the components after creating them.

In the previous question, I tried using Angular-Material, but realised it might not be possible to use it for components, due to the issue of adding "cdkDrag" directive to the component's selector tag, and the fact that the cdkDropList and cdkDrag might need to be in the same template.

I have a div as such in the template:

<div cdkDropList style="margin: 20px" (cdkDropListDropped)="drop($event)">
    <div #container></div>
</div>

And, I am creating custom components as follows:

@ViewChild('container', {read: ViewContainerRef})
  container: ViewContainerRef;

const childComponent = this.componentFactoryResolver.resolveComponentFactory(CustomComponent);
const component = this.container.createComponent(childComponent);

This works fine. Is it possible at all to create draggable dynamically created components?

Thank you.

解决方案

Update

While this works fine with one single type of component, if you need to use different dynamic types of components, read Chaitanya Bangera's comment down below!

Original Comment

Should work with something like this (CmpComponent would be your component that you want to insert):

  components: CmpComponent[];

const childComponent = this.componentFactoryResolver.resolveComponentFactory(CustomComponent);
this.components.push(childComponent);


drop(event: CdkDragDrop<CmpComponent[]>) {
  moveItemInArray(this.components, event.previousIndex, event.currentIndex);
}

<div cdkDropList style="margin: 20px" (cdkDropListDropped)="drop($event)">
    <div cdkDrag *ngFor="let cmp of components">
        <app-cmp></app-cmp>
    </div>
</div>

这篇关于Angular 7 - 向动态创建的组件添加拖放行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！