1
私たちは角度4で構築されたアプリを持っています。今はdragulaを使ってテーマをカスタマイズしようとしています。私はページのすべての部分を実装し、それは働いていて、永続しています。しかし、今は大きな問題が1つあります。私たちはページ間を切り替えるために角度ルータリンクを使用しました。すべての問題はうまくいきますが、別のページ（角度ルータリンクで動作する）に切り替えてメインページに戻ると、ドラッグラが正しく動作しなくなります。私は結果を印刷しましたが、各ノードの位置が保持されているように見えますが、実際には動作していますが、各コンポーネントをドラッグすると消えてしまいます。ng-dragulaドラッグされたアイテムを除去する、角度4のルータ
<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]);
}
Iコンポーネントを示し方法： 聞きを助けるかもしれないいくつかのコードである Iは[dragula]を有する3つのdiv要素を持っている= '袋1' およびどの項目がどのdivに表示されるべきかを示す3つのリスト。各divには、forループ内のすべてのドラッグ可能な要素がスパン内に配置されていました。したがって、対応するリストにあれば、すべての要素が印刷されます。非常にうまくいっていますが、ルータのリンクに切り替えて再びメインページに戻ると、ng-draculaは動作を停止し、アイテムを移動させません。それは角度のrouterlinkに関連しているようだが、私は理由を知らない。
私のコンポーネントにはcssスタイル：display：gridがありますが、routerlinkの後にはこのスタイルがありますが、動作しません。無効にして再度有効にすると、ちょうど動作します良い。
ご協力いただければ幸いです。