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]

如何使Dragula成为Angular 2中的全局提供程序以共享组件

1 个答案: