Wie man Dragula zu einem globalen Anbieter in Angular 2 macht, um Komponenten zu teilen

Question

Ich versuche, es so zu machen, dass ich zwischen den Komponenten ziehen und ablegen kann, aber Dragula den empfohlenen Weg eingerichtet hat, bedeutet, dass jede Komponente ihre eigene hat Kopie von Dragula. Also kann ich nicht zwischen den Komponenten ziehen und ablegen.

Ich habe versucht, Dragula mit dem UpgradeAdaptor zu einem globalen Anbieter zu machen, aber möglicherweise ist das nicht der richtige Weg. Ich bin ganz neu in Angular

Hier ist die Komponente, die ich hoffe, ich wiederverwenden:

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) { } 
} 

Und wo ich versuche Dragula zu machen global:

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"); 

Und Im Moment kann ich die Komponente zwar ziehen und neu anordnen, aber ich kann sie nicht über die Komponenten verschieben. Und sie haben den gleichen Taschennamen.

Answer 1

Halten Sie im App-Komponente:

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

In Subkomponenten, nur:

directives: [Dragula]