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

Question

我正在设置一个 Ionic (4) 应用程序，您可以在其中将元素从工具栏拖放到 window 中。 我想根据它们的类型更改删除的元素。 我正在使用 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 上设置的一样。

Answer 1

我想通了（在拖放期间工作）：

1. 将 Dragula 元素嵌套在一个新的

2. 在 page.component.ts 内部创建： this.subs.add(this.dragulaService.cloned(this.BAG).subscribe(({clone})=>{

3. 在此内部，使用 DOM 方法，创建一个新元素var new_El = document.createElement('ion-card')

4. 删除克隆“clone.removeChild(..)”的所有子代
5. 在克隆元素内绑定新元素clone.appendChild(new_El)