如何使Dragula成为Angular 2中的全球提供者以在组件之间共享

Question

我正在尝试使其能够在组件之间很好地拖放，但是将Dragula设置为推荐的方式意味着每个组件都有其自己的Dragula副本。 所以我不能在组件之间拖放。

我试图使用UpgradeAdaptor使Dragula成为全球提供商，但是这可能不是正确的解决方法。 我对Angular很陌生

这是我希望重用的组件：

import {Component, Input, Inject}   from "@angular/core";
import {Dragula, DragulaService}   from "ng2-dragula/ng2-dragula";

@Component({
  selector: "drag-container",
  template: require("../templates/draggable/drag-container"),
  directives: [Dragula],
  viewProviders: [],
  providers: []
})

export class DragContainer<T> {
  @Input() items: Array<T>;
  @Input() edit: boolean;

  constructor(private dragulaService: DragulaService) { }
}

在我试图使Dragula成为全球性的地方：

import {UpgradeAdapter}                             from "@angular/upgrade";
import {DragulaService}                             from "ng2-dragula/ng2-dragula";

export const adapter = new UpgradeAdapter();

window["foo"].coursesAdapter = adapter;

// Angular 2 services
adapter.addProvider(DragulaService); 

// Angular 1 services we want to use in Angular 2 components
adapter.upgradeNg1Provider("$routeParams");
adapter.upgradeNg1Provider("translate");
adapter.upgradeNg1Provider("showError");
adapter.upgradeNg1Provider("$location");

现在，我仍然可以在组件中拖动和重新排序，但是不能在组件之间移动它。 而且他们有相同的包名。

Answer 1

保留在应用程序组件中：

directives: [Dragula],
encapsulation: ViewEncapsulation.None,
viewProviders: [DragulaService]

在子组件中，只需：

    directives: [Dragula]