有没有一种方法可以使组件（而非元素）在角度上可拖动？

Question

我使用Angular CDK拖放模块，在div，p等html元素上效果很好。但是由于某种原因，当我在组件上放置cdkDrag指令时，它不起作用。

<!-- WORKS -->    
<div cdkDrag>content</div>    

<!-- DOESNT WORK -->
<my-component cdkDrag></my-component>

我注意到的另一件事是，除非我编辑css并将auto放在组件样式上，否则，每个角组件的宽度和高度都设置为display: block（基本上为0x0）

Answer 1

组件是自定义标签。在浏览器中，该标签被视为“未知”标签，并使其具有默认显示inline。如果在其中添加块元素，这也会导致尺寸为0x0。

要克服此问题，应将其设置为display: block或inline-block或flex（或任何适合您的名称）以使其也可拖动。如果这不会破坏其余可拖动对象的布局，则可以创建一个全局类：

.cdkDrag {
  display: inline-block;
}