有没有办法让组件（不是元素）在 angular 中可拖动？

Question

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

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

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

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

Answer 1

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

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

.cdkDrag {
  display: inline-block;
}

Is there a way to make components (not elements) draggable in angular?