cdkDragHandle не работает внутри дочернего компонента - PullRequest
Новая
       37

cdkDragHandle не работает внутри дочернего компонента

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

Использование @ angular / cdk 7.2.1: При определении родительского компонента, содержащего cdkDropList и вложенный список компонентов cdkDrag, определение cdkDragHandle внутри вложенного дочернего компонента не работает.Если одна и та же структура находится в одном и том же компоненте, cdkDragHandle работает отлично.

https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html

Кто-нибудь нашел исправление, заставляющее работать cdkDragHandle, даже если оно не определено в том же компоненте, что и cdkDrag?

1 Ответ

0 голосов
/ 24 июля 2019

Это решение сработало для меня:

Родительский компонент: 

<div cdkDropList #list="cdkDropList"
  [cdkDropListData]="myArray"
  (cdkDropListDropped)="drop($event)">

  <app-item
    *ngFor="let item of myArray"
    cdkDrag>
    <div cdkDragHandle></div>
  </app-item>

</div>

Дочерний компонент (app-item): 

<div class="drag-container">
  <ng-content></ng-content>
  <div class="drag-handle">drag here</div>
</div>

Затем стиль cdk-drag-Обработка класса в родительском компоненте.cdk-drag-handle поставляется с материалом, поэтому нам не нужно применять его вручную: 

.cdk-drag-handle {
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 100;
   background-color: transparent;
   cursor: move;
 }

Затем задайте стиль контейнера для перетаскивания с позицией: относительной и тем, что вы хотите.У меня есть элемент внутри (перетаскивание), который также принимает всю ширину и высоту контейнера, который содержит изображение (так же, как sidenote).

...