如何使用ng2-dragula拖放到多个Angular2组件

qnr*_*eck 7 javascript drag-and-drop dragula angular

我有一个Angular2组件,使用ng2-dragula进行拖放,如下所示:

@Component({
  selector: 'my-comp',
  directives: [
    Dragula
  ],
  viewProviders: [
    DragulaService
  ],
  template: `
    <div class="my-div">
      <div *ngFor="#item of items" [dragula]='"card-bag"' [dragulaModel]='items'>
      ...
      </div>
    </div>
  `
})
Run Code Online (Sandbox Code Playgroud)

我的问题:如果我创建了多个"my-comp"组件,"card-bag"中的项目不能拖放这些组件,尽管它们具有相同的包名称.这些项目只能在其拥有的组件内拖放.

我们是否有任何跨组件拖放的配置,或者这是ng2-dragula限制?

谢谢.

Bhu*_*kar 10

如果您没有使用,[dragulaModel]那么只要您只viewProviders: [ DragulaService ]在顶部/根组件中设置一次,嵌套组件之间的拖放效果就会很好.

切记不要viewProviders: [ DragulaService ]在其他组件中设置,因为它为每个组件创建新实例.

编辑:最近我使用ng2-dndnpm包实现了给定的场景.它比ng2-dragula更好,并提供简单的物体传递和其他东西.它可能会解决您的问题.