Javascript 角度：如何在dragula ng2上动态更改丢弃的元素？

我正在设置一个Ionic（4）应用程序，您可以将工具栏中的元素拖放到窗口中。我想根据元素的类型更改删除的元素。我用的是ng2德古拉

对于exmaple，我想删除一个元素

，当它被删除时，它应该类似于

-我尝试在事件（）期间更改DOM outerHTML，但是新创建的元素中的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>"
      }
   } 
 })
}

内容
BAG=“DRAGULA_事件”；
subs=新订阅（）；
导出类事件组件{
公共构造函数（私有DragularService:DragularService）{
this.subs.add（this.dragularservice.drop）（this.BAG）
.subscribe（{el，source，target}）=>{
el.outerHTML=“内容”
}
} 
})
}

我希望新的DOM元素具有dragula属性，就像我在outerHTML标记上设置的那样。

我找到了它（在拖放过程中有效）：

将dragula元素嵌套在新的

创建内部page.component.ts：

this.subs.add（this.dragulaService.cloned（this.BAG）.subscribe（{clone}）=>{

其中，使用DOM方法创建一个新元素

var new\u El=document.createElement（'ion-card'）

删除克隆克隆的所有子项。removeChild（..）`

在克隆元素中绑定新元素

clone.appendChild（new\u El）

这似乎可以奏效：