перетаскивание cdk компонента, содержащего содержимое

Question

У меня есть компонент круга. В этом круге есть div данных. Когда я начинаю перетаскивать весь компонент с его содержимым внутри, круг дублируется без div с данными внутри. Иерархия выглядит следующим образом:

<circle-component cdkDrag cdkDropList> // the circle is dragable
   <div> // when drag is started the circle is duplicated without the data inside 
        some data here
   </div
</circle-component>

возможно, мне нужно каким-то образом скопировать компонент круга. Что мне следует попробовать, чтобы увидеть круг и его содержимое при запуске перетаскивания? ** данные передаются как @Input компоненту круга

Answer 1

ckdDrag - это «перетаскиваемый» объект, cdkDropList - это коллекция (может быть уникальным элементом), которая имеет «внутри» перетаскиваемые объекты.

Итак, если вы хотите перетащить только круг

<circle-component cdkDrag > // remove the cdkList
   <div> 
        some data here
   </div
</circle-component>

Если вы контролируете какие-то данные

   <div cdkList>
      <circle-component cdkDrag > // the cdkDrag "inside" a cdkList
         <div> 
             some data here
        </div
      </circle-component>
   </div>