nG2-dragula setOptions и проблема удаления версии - PullRequest
Новая
       37

nG2-dragula setOptions и проблема удаления версии

0 голосов
/ 18 февраля 2019

Очевидно 1.5.0 поддерживает this.dragulaService.setOptions, в то время как 2.1.1 нет и наоборот, в то время как 2.1.1 поддерживает this.dragulaService.drop подписка 1.5.0 нет.

Вилка Stackblitz для 1.5.0

Вилка Stackblitz для 2.1.1

Соответствующий код для уведомления:

1.5.0 (не работает)

(ошибка) :

Невозможно вызвать выражение, тип которого не содержит подписи вызова.Тип 'EvenEmitter' не имеет совместимых подписей вызовов.(свойство) AppComponent.dragulaService: DragulaService 

this.dragulaService.drop("dnd")
      .subscribe(({ name, el, target, source, sibling }) => {
      //content
}

1.5.0 (рабочий) 

this.dragulaService.setOptions('dnd', {
  moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});

2.1.1 (рабочий) 

this.dragulaService.drop("dnd")
    .subscribe(({ name, el, target, source, sibling }) => {
    //content
}

2.1.1 (не работает) 

this.dragulaService.createGroup("dnd", {
  moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
});

(ошибка) :

Аргумент типа '{moves: (el: any, source: any), дескриптор: любой, родной брат: любой) => логический;} 'нельзя назначить параметру типа' DragulaOptions '.Объектный литерал может указывать только известные свойства, а «ходы» не существуют в типе «Параметры Dragula».дескриптор (параметра): любой

Обратите внимание, что при наличии руководства по миграции и changelog он делает состояние какзамените setOptions на группу создания .Но это все еще не работает в моем случае.

Есть ли способ использовать обе функции?Или я что-то упускаю очевидное?

Ответы [ 2 ]

0 голосов
/ 18 февраля 2019

Вот что у меня получилось.

импортируйте эти зависимости. 

import { DragulaService } from 'ng2-dragula';
import { Subscription } from 'rxjs/Subscription';

.ts file - 


MANY_ITEMS = 'MANY_ITEMS';
subs = new Subscription();

  constructor(private dragula: DragulaService) { 

    this.subs.add(dragula.dropModel(this.MANY_ITEMS)
      .subscribe(({ el, target, source, sourceModel, targetModel, item }) => {

        console.log(el, target, source, sourceModel, targetModel, item);

      })
    );
  }

.html file - 


<ul [(dragulaModel)]='arrayList' [dragula]="MANY_ITEMS">
  <li>one</li>
  <li>two</li>
</ul>

вы сможете перетаскивать элементы списка «один» и «два».

0 голосов
/ 18 февраля 2019

Хотите: создать группу и использовать функциональность drop вместе?

Мы используем createGroup вместе с drop, но с одним небольшим отличием, но с небольшим отличием - сервисы отбрасывания добавляются в Подписку, но я не думаю, что это имеет какое-либо значение.Итак, наш код напрокат: 

export class xxxComponent implements OnInit {
    ...
    public dragula$: Subscription
    ...

    constructor(public dragulaService: DragulaService) {

        this.dragulaService.createGroup('ITEMS', {
            direction: 'vertical',
            moves: (el, source, handle): boolean => handle.className.indexOf('item-keeper') > -1
        });
    }

    ngOnInit() {

        this.dragula$.add(this.dragulaService.drop('ITEMS')
            .subscribe(({name, el}) => {
                ....
            })
        );
    }

}

Я думаю, что наши решения верны в соответствии с документацией о событиях: https://github.com/valor-software/ng2-dragula#events

Наконец, я думаю, что ваша проблема - ошибка с именем классапотому что все остальные отлично работают на вашем примере Stackblitz.Если вы раскомментируете: 

    this.dragulaService.createGroup("dnd", {
      moves: (el, source, handle, sibling) => !el.classList.contains('nodrag')
    });

ваши ярлыки не перетаскиваются, поэтому вы получаете то, что вам нужно.

...