Angular：如何在 Dragula ng2 上动态更改放置的元素？答案

【问题标题】：Angular : How to change dropped element dynamically on dragula ng2?Angular：如何在 Dragula ng2 上动态更改放置的元素？
【发布时间】：2019-09-27 15:53:02
【问题描述】：

我正在设置一个 Ionic (4) 应用程序，您可以在其中将元素从工具栏拖放到窗口中。我想根据它们的类型更改删除的元素。我正在使用 ng2-dragula。

例如，我想删除一个元素 <ion-chip></ion-chip>，当它被删除时，它应该类似于 <ion-card dragula="DRAGGABLE"></ion-card>。

-我尝试在事件期间更改 DOM outerHTML (https://github.com/valor-software/ng2-dragula/blob/master/modules/demo/src/app/examples/02-events.component.ts)，但是新创建的元素内的 Dragula 未激活。

-我试过 *ngIf 但这似乎也不能动态加载。

我还有哪些可能？

<div dragula="DRAGULA_EVENTS">
  <div>content</div>
</div>

BAG = "DRAGULA_EVENTS";
subs = new Subscription();

export class EventsComponent{
 public constructor(private dragulaService: DragulaService){
   this.subs.add(this.dragulaService.drop(this.BAG)
      .subscribe(({el,source,target})=>{ 
         el.outerHTML = "<ion-card dragula='DRAGULA_EVENTS'>content</ion-card>"
      }
   } 
 })
}

我希望新的 DOM 元素具有属性 dragula 就像我在 outerHTML-tag 上设置的一样。

【问题讨论】：

好像可以这样：change dragging elements

标签： javascript angular ionic-framework dom ng2-dragula

【解决方案1】：

我想通了（在拖放过程中有效）：

将 Dragula 元素嵌套在一个新的
在 page.component.ts 内创建： this.subs.add(this.dragulaService.cloned(this.BAG).subscribe(({clone})=>{
在这里面，用DOM方法，创建一个新元素var new_El = document.createElement('ion-card')
删除克隆 'clone.removeChild(..)` 的所有子级
在克隆元素clone.appendChild(new_El)中绑定新元素

【讨论】：