Как сделать Dragula глобальным поставщиком в Angular 2 для обмена между компонентами

Question

Я пытаюсь сделать так, чтобы я мог легко перетаскивать между компонентами, но с настройкой Dragula рекомендуемый способ означает, что каждый компонент имеет свои собственные копию Драгулы. Поэтому я не могу перетащить между компонентами.

Я попытался сделать Dragula глобальным провайдером, использующим UpgradeAdaptor, но, возможно, это не самый подходящий способ. Я совершенно новой для Угловое

Вот компонент, который я надеюсь, что повторное использование:

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]