如何使 Dragula 成为 Angular 2 中的全球提供商以跨组件共享答案

【问题标题】：How to make Dragula a global provider in Angular 2 to share across components如何使 Dragula 成为 Angular 2 中的全球提供商以跨组件共享
【发布时间】：2016-09-16 15:33:53
【问题描述】：

我正在努力做到这一点，以便我可以在组件之间很好地拖放，但是以推荐的方式设置 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");

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

【问题讨论】：

标签： javascript angularjs angular dragula

【解决方案1】：

保留在应用组件中：

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

在子组件中，只需：

    directives: [Dragula]

【讨论】：