Javascript Angular 7-向动态创建的组件添加拖放行为

这是我上一个问题的延续，所以：

我通过单击按钮动态创建组件。组件以类似列表的方式一个接一个地显示。我想介绍拖放行为，以便用户可以在创建组件后重新排列它们

在上一个问题中，我尝试使用Angular Material，但意识到可能无法将其用于组件，这是由于将cdkDrag指令添加到组件的选择器标记的问题，以及cdkDropList和cdkDrag可能需要位于同一模板中的事实

我在模板中有一个div：

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

<div cdkDropList class="example-list" style="margin: 20px" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let cmp of components">
        <ng-container *ngIf="cmp.componentType.name=='Component1'">
            <app-Component1 cdkDrag></app-Component1>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component2'">
            <app-Component2 cdkDrag></app-Component2>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component3'">
            <app-Component3 cdkDrag></app-Component3>
        </ng-container>

    </ng-container>
</div>

这个很好用。是否可以创建可拖动的动态创建组件

谢谢。

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

原始评论 应使用类似于此CMP组件的组件，该组件将是您要插入的组件：

组件：CMP组件[]； const childComponent=this.componentFactoryResolver.resolveComponentFactoryCustomComponent； this.components.pushchildComponent； dropevent:CdkDragDrop{ MoveIteminarayThis.components、event.previousIndex、event.currentIndex； } 使现代化 虽然这适用于单一类型的组件，但如果您需要使用不同的动态类型的组件，请阅读下面Chaitanya Bangera的评论

原始评论 应使用类似于此CMP组件的组件，该组件将是您要插入的组件：

组件：CMP组件[]； const childComponent=this.componentFactoryResolver.resolveComponentFactoryCustomComponent； this.components.pushchildComponent； dropevent:CdkDragDrop{ MoveIteminarayThis.components、event.previousIndex、event.currentIndex； }

---

多亏了莫里切尼诺的回复，终于成功了。我将标记Maurice的答案为已接受，因为他们的解决方案对单个组件都很有效

在让Maurice的解决方案适用于多个组件时，我遇到了一个神奇的概念，称为ng容器！真是个救命恩人！！我的解决办法如下：

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

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

components=[];

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 #container></div>
</div>

<div cdkDropList class="example-list" style="margin: 20px" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let cmp of components">
        <ng-container *ngIf="cmp.componentType.name=='Component1'">
            <app-Component1 cdkDrag></app-Component1>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component2'">
            <app-Component2 cdkDrag></app-Component2>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component3'">
            <app-Component3 cdkDrag></app-Component3>
        </ng-container>

    </ng-container>
</div>

终于，经过一周的搜索，它终于成功了！

---

谢谢大家!

多亏了莫里切尼诺的回复，它终于成功了。我将标记Maurice的答案为已接受，因为他们的解决方案对单个组件都很有效

在让Maurice的解决方案适用于多个组件时，我遇到了一个神奇的概念，称为ng容器！真是个救命恩人！！我的解决办法如下：

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

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

components=[];

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 #container></div>
</div>

<div cdkDropList class="example-list" style="margin: 20px" (cdkDropListDropped)="drop($event)">
    <ng-container *ngFor="let cmp of components">
        <ng-container *ngIf="cmp.componentType.name=='Component1'">
            <app-Component1 cdkDrag></app-Component1>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component2'">
            <app-Component2 cdkDrag></app-Component2>
        </ng-container>
        <ng-container *ngIf="cmp.componentType.name=='Component3'">
            <app-Component3 cdkDrag></app-Component3>
        </ng-container>

    </ng-container>
</div>

终于，经过一周的搜索，它终于成功了！

---

谢谢大家!

通过使用createComponent方法动态生成组件并使用ViewComponentRef方法处理移动，我已经解决了这个问题：

container.component.html

container.component.ts

dynamic.component.html

在这种情况下，您可以直接通过components数组访问组件实例。

---

通过使用createComponent方法动态生成组件并使用ViewComponentRef方法处理移动，我解决了这个问题：

container.component.html

container.component.ts

dynamic.component.html

在这种情况下，您可以直接通过components数组访问组件实例。

---

谢谢，我正在看一看，虽然我觉得我可能会遇到困难，因为用户可以动态创建几个可用组件中的一个。它类似于用户可以单击并创建的小部件列表，因此在模板中可能不起作用。编辑：我将对单个组件进行尝试，以检查该方法是否有效。我使用您的代码作为基础并使用ng容器（而不是组件选择器for*ngFor）使其有效，最终有效。我将把你的答案标记为已接受，因为它只适用于一个模板。我已经在下面添加了适用于不同组件的答案。@ChaitanyaBangera很高兴它起作用了！我更新了我的答案，以便有相同问题的人更容易找到您的评论。@ChaitanyaBangera您能告诉我您是如何以这种方式处理组件参数的吗？我的意思是，您是使用具有动态生成值的输入/输出，还是有某种方式访问组件实例？与您的问题相同，并且不知道如何处理组件参数。谢谢，我正在查看，尽管我觉得可能会遇到困难，因为用户可以动态创建多个可用组件中的一个。它类似于用户可以单击并创建的小部件列表，因此在模板中可能不起作用。编辑：我将对单个组件进行尝试，以检查该方法是否有效。我使用您的代码作为基础并使用ng容器而不是组件选择器FO使其工作

---

r*ngFor，它终于起作用了。我将把你的答案标记为已接受，因为它只适用于一个模板。我已经在下面添加了适用于不同组件的答案。@ChaitanyaBangera很高兴它起作用了！我更新了我的答案，以便有相同问题的人更容易找到您的评论。@ChaitanyaBangera您能告诉我您是如何以这种方式处理组件参数的吗？我的意思是，您是使用具有动态生成值的输入/输出，还是有某种方式访问组件实例？与您的问题相同，但不知道如何处理组件参数。dropevent:CdkDragDrop您能告诉我CMpCOmponet[]是指吗？dropevent:CdkDragDrop您能告诉我CMpCOmponet[]是指什么吗？谢谢！亲爱的，谢谢！