コンポーネント間でうまくドラッグ アンド ドロップできるようにしようとしていますが、推奨される方法で 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");
現時点では、コンポーネント内でドラッグして並べ替えることはできますが、コンポーネント間を移動することはできません。しかもバッグの名前が同じ。