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)