有沒有辦法使組件（而不是元素）在 angular 中可拖動？

Question

我使用 Angular CDK 拖放模塊，它在 div、p 等 html 元素上運行良好。 但是由於某種原因，當我在組件上放置 cdkDrag 指令時，它不起作用。

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

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

我注意到的另一件事是，angular 中的每個組件的寬度和高度都設置為auto （基本上是 0x0），除非我編輯 css 並將display: block放在組件樣式上

Answer 1

組件是一個自定義標簽。 在瀏覽器中，這被視為“未知”標簽，並使其具有inline的默認顯示。 如果在其中添加塊元素，這也會導致尺寸為 0x0。

為了克服這個問題，你應該讓它display: block或inline-block或flex （或任何適合你的東西）以使其也可拖動。 如果這不會破壞其余可拖動對象的布局，您可以創建一個全局類：

.cdkDrag {
  display: inline-block;
}