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

Question

我们有一个使用 Angular 4 构建的应用程序，现在我们正尝试使用 dragula 自定义我们的主题。我实现了页面的每个部分，它正在工作，持久等。但现在我有一个大问题。我们使用角度路由器链接在我们的页面之间切换。一切都很好，但是在我切换到另一个页面(适用于角度路由器链接(并返回主页后，它会导致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停止工作并且它不会移动项目。似乎它与角度中的路由器链接有关，但我不知道为什么。

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

任何帮助将不胜感激。

Answer 1

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

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

对于德拉古拉问题，我之前对一些错误使用了一些过滤器，我的意思是这个过滤器：

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

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