angular - 是否可以跨多个子组件使用 cdk-drag-and-drop 指令？

Question

我正在开发一个项目，该项目使用 Angular 的 cdk-drag-and-drop 功能来对卡片网格进行排序。因为它是一个网格，所以我以这个 StackBlitz为例。这个例子正是我想要实现的。

但是与我的应用程序略有不同。在我的情况下，网格本身和网格上的所有项目（卡片）都是独立的 Angular 组件。这意味着我有以下两个 HTML..

网格 HTML：

<div class="example-container" cdkDropListGroup>
  <div cdkDropList [cdkDropListEnterPredicate]="dropListEnterPredicate" (cdkDropListDropped)="dropListDropped($event)"></div>
  <div cdkDropList *ngFor="let card of cards" [cdkDropListEnterPredicate]="dropListEnterPredicate" (cdkDropListDropped)="dropListDropped($event)">
    <my-card-component [card]="card" etc..></my-custom-component>
  </div>
</div>

以及网格中每张卡片的 HTML（'my-card-component'）：

<div class="card" cdkDrag (cdkDragMoved)="dragMoved($event)">
  <!-- A lot more html -->
  <div cdkDragHandle>Drag me</div>
</div>

但是，这并没有达到预期的效果。然后，当我将卡片的 HTML 移回它的父组件 HTML 文件（因此，网格）时，它确实可以工作。显然，跨多个组件使用 cdk 指令是行不通的。这是预期的行为吗？还是应该跨多个组件工作？

我已经尝试将cdkDrag-directive 添加到my-card-componenthtml-element 上，因为这样会将该指令保留在网格组件中。这使得卡片可拖动，但我不能将它放在任何地方。此外，它使整个卡片可拖动，因此似乎忽略cdkDragHandle了子组件中的 。所以这并没有让我更进一步。

最好，我会保持组件的分离并仍然使用 cdk 的指令。这可能吗？

标签： angulardrag-and-dropangular-cdk-drag-drop