有没有办法使组件（而不是元素）以角度拖动？

Question

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

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

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

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

Answer 1

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

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

.cdkDrag {
  display: inline-block;
}