Question

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

<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] =＆＃39; bag-one＆＃39;还有3个列表，表明哪个项目应该出现在哪个div中。在每个div中，我将每个可拖动元素放在一个for循环中的for循环中。因此，如果它在相应的列表中，则将打印每个元素。它运行得很好，但在我切换到routerlink并再次返回主页面后，ng-dracula停止工作并且它没有移动物品。它似乎与angularlink中的routerlink有关，但我不知道为什么。

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

任何帮助都会非常感激。

Answer 1

不幸的是我发现了问题，这只是一个小错误。第一个问题，我移动了显示样式：使用：host意味着：

@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删除拖动的项目，角4路由器

1 个答案: