Javascript 在两个角度组件之间使用ng2 dragula进行拖放

我有两个角度组件，一个称为包含单个托盘项目的托盘，另一个称为主机，最初是空的。我已经分别为这些组件“托盘袋”和“主机袋”声明了NDRAGLA指令。我能够在托盘组件中重新排序托盘项目，没有任何问题，但当我尝试将托盘项目拖到主机组件时，它不接受拖放操作。是否有任何特定的配置，我必须让我的主机接受托盘上的物品

调色板的HTML为：

<ul class="palette">
 <app-palette-item [dragula]='"palette-bag"' id="palette" *ngFor="let item of Items" [Name]="item.Name" [Description]="item.Description" [Icon]="item.Icon"></app-palette-item>
 </ul>

对于主持人：

<div class="host" id="host" [dragula]='"host-bag"' [dragulaModel]='Items'>
  <div *ngFor='let text of Items' [innerHtml]='text'></div>  
</div>

我的顶级应用程序组件如下所示：

<div>
  <app-palette id="palette"></app-palette>
  <app-host id="host"></app-host>
</div>

---

为了允许在两个包之间进行拖放，它们必须具有相同的名称，例如：First bag:

对于调色板：

<ul class="palette">
 <app-palette-item [dragula]='"first-bag"' id="palette" 
 *ngFor="let item of Items" [Name]="item.Name" 
 [Description]="item.Description" [Icon]="item.Icon"></app-palette-item>
</ul>

对于主机：

<div class="host" id="host" [dragula]='"first-bag"' [dragulaModel]='Items'>
  <div *ngFor='let text of Items' [innerHtml]='text'></div>  
</div>