ng-dragula 删除拖动的项目，角度 4 路由器

Question

我们有一个使用 Angular 4 构建的应用程序，现在我们正在尝试使用 Dragula 自定义我们的主题。我实现了页面的每一部分，它正在工作、持续存在等等。但现在我遇到了一个大问题。我们使用角度路由器链接在我们的页面之间切换。一切正常，但是在我切换到另一个页面（与 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 个具有 [dragula]='bag-one' 的 div 元素以及 3 个列表，它们指示哪个项目应该出现在哪个 div 中。在每个 div 中，我将每个可拖动元素放在一个跨度的 for 循环中。因此，如果每个元素都在相应的列表中，它将被打印出来。它工作得很好，但是在我切换到 routerlink 并再次返回主页后，ng-dracula 停止工作并且它没有移动项目。它似乎与角度上的routerlink有关，但我不知道为什么。

我也遇到了一些 css 问题，例如我的组件有 css 样式：显示：网格但在 routerlink 之后，我有这种样式，但它不起作用，当我禁用它并重新启用它时，它工作得很好.

任何帮助将不胜感激。

Answer 1

不幸的是，我发现了问题，这只是一个小错误。 第一个问题，我将 display: flex 的样式移到组件中，使用 :host 表示：

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

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

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

当我删除它时，问题解决了，我不知道为什么！但它现在正在工作！ :D