ng-dragula 删除拖动的项目，angular 4 router

Question

我们有一个使用 angular 4 构建的应用程序，现在我们正尝试使用 dragula 自定义我们的主题。我实现了页面的每一部分，它正在工作，持续存在等等。但现在我遇到了一个大问题。我们使用 angular routerlink 在我们的页面之间切换。一切正常，但在我切换到另一个页面（与 angular routerlink 一起工作）并返回主页后，它会导致 dragula 无法正常工作。我打印了结果，但似乎每个节点的位置都保持不变并且它确实有效但在我拖动每个组件后它会消失。听到一些可能有帮助的代码：

<span *ngFor="let portion of filterUndefinedItems(getPortions1())">
    <rh-market-watch
        *ngIf="portion.name == 'market-watch'"
        style="display: flex;"></rh-market-watch>

...

this._dragulaService.setOptions('bag-one', {
    revertOnSpill: true,
    copy: true,
    moves: function (el: any, container: any, handle: any): any {
        if(el == null || el.children[0] == null) return false;
        me.selectedElementName = el.children[0].getAttribute('name');
        me.selectedElementsParentId = container.id;

        return typeof(handle.className) == 'string' && handle.className.indexOf('draggable-main') >= 0;
    }
});
this._dragulaService.drop.subscribe((value) => {
    if (value[2].id != this.selectedElementsParentId) {
        if (value[2].id.indexOf('2') > 0)
            this.updateComponentColumn(this.selectedElementName, 2);
        else if (value[2].id.indexOf('3') > 0)
            this.updateComponentColumn(this.selectedElementName, 3);
        else
            this.updateComponentColumn(this.selectedElementName, 1);
    }
    if (value[4] != null && value[4].firstElementChild != null)
        this.updateComponentPosition(
            value[1].firstElementChild.getAttribute('name'),    // Name of element which we want to move, for example x
            value[4].firstElementChild.getAttribute('name')     // Name of element which x will place on top of it
        );
    let userDataList: UserData[] = [];
    let userData: UserData = new UserData;
    userData.dataKey = UserData.EXIR_CUSTOM_THEME_POSITIONS;
    userData.dataValue = JSON.stringify([this.getPortions1(), this.getPortions2(), this.getPortions3()]);
    userDataList.push(userData);

    this._restService.setUserData(userDataList, this._http)
        .then(error => {
            this.error(error);
        });
});
private findPortion(portionName): any[] {
    for(let portion of this.getPortions1())
        if(portion.name == portionName)
            return [1, portion];
    for(let portion of this.getPortions2())
        if(portion.name == portionName)
            return [2, portion];
    for(let portion of this.getPortions3())
        if(portion.name == portionName)
            return [3, portion];
    return null;
}

private getRelatedPortions(portionNumber): Portion[] {
    switch (portionNumber) {
        case 1:  return this.portions1;
        case 2:  return this.portions2;
        case 3:  return this.portions3;
        default: return null;
    }
}

private setRelatedPortions(portionNumber, portions) {
    switch(portionNumber) {
        case 1:
            this.portions1 = portions;
            return;
        case 2:
            this.portions2 = portions;
            return;
        case 3:
            this.portions3 = portions;
            return;
        default:
            return;
    }
}

private updateComponentPosition(portionName: string, newPosition: string) {
    let portionInfo: any[] = this.findPortion(portionName);
    let portionNumber: number = portionInfo[0];
    let portionToDrag: Portion = portionInfo[1];

    this.setRelatedPortions(portionNumber, this.getRelatedPortions(portionNumber).filter(obj => obj !== portionToDrag));
    this.getRelatedPortions(portionNumber).splice(this.getRelatedPortions(portionNumber).indexOf(this.findPortion(newPosition)[1]), 0, portionToDrag);
}

private updateComponentColumn(portionName: string, column: number) {
    let portionInfo: any[] = this.findPortion(portionName);
    this.getRelatedPortions(portionInfo[0]).splice(this.getRelatedPortions(portionInfo[0]).indexOf(portionInfo[1]), 1);
    this.getRelatedPortions(column).push(portionInfo[1]);
}

我展示组件的方式：我有 3 个 div 元素，其中有 [dragula]='bag-one' 和 3 个列表，指示哪个项目应该出现在哪个 div 中。在每个 div 中，我将每个可拖动元素放在一个跨度的 for 循环中。因此，如果每个元素都在相应的列表中，它就会被打印出来。它工作得很好，但在我切换到路由器链接并再次返回主页后，ng-dracula 停止工作并且它不移动项目。 angular好像和routerlink有关，不知道为什么。

我也遇到了一些 css 问题，例如我的组件有 css 样式：display: grid 但在 routerlink 之后，我有这种样式，但它不起作用，当我禁用它时并重新启用它，它工作正常。

任何帮助将不胜感激。

Answer 1

不幸的是我发现了问题，这只是一个小错误。第一个问题，我使用 :host means:

将 display: flex 样式移动到组件中

@Component({
    selector: 'market-watch',
    template: 'blah-blah',
    style: `
        :host { display: grid }
    `
})

对于 dragula 问题，我之前使用了一些过滤器来解决一些错误，我的意思是这个过滤器：

filterUndefinedItems(items) {
    return items.filter(obj => obj !== undefined && obj != null);
}

然后我把它去掉后，问题就解决了，不知道为什么！但它现在正在工作！ :D

ng-dragula 删除拖动的项目，angular 4 router

ng-dragula removing dragged item, angular 4 router

dragula

angular2-routing

angular