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

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

我正在开发一个项目，该项目使用 Angular 的 cdk 拖放功能来对卡片网格进行排序。因为它是一个网格，所以我以 this 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 指令添加到 my-card-component html 元素上，因为这会将该指令保留在网格组件中。这使得卡片可以拖动，但我不能将它放在任何地方。此外，它使整个卡片可拖动，因此似乎忽略了子组件中的 cdkDragHandle。所以这并没有让我更进一步。

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