是否可以在不创建dom元素的情况下将模板封装在Angular组件中？

Question

我正在尝试从自定义组件内的角材料使用cdkDrag指令，但是它不起作用。我相信是因为cdkDrag元素不再是cdkDropList元素的直接子元素，因为angular在DOM中为我的组件创建了一个新元素。我尝试使用cdkDragRootElement，但是它也不起作用。所以我在想是否有一种方法不会创建新的dom元素。

以下示例以斜角材质（https://material.angular.io/cdk/drag-drop/overview#transferring-items-between-lists）起作用，但是当我将cdkDrag div包装在组件中时，它的行为会松散。

工作示例：

<div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div>
</div>

在我的自定义组件中不起作用：

<div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <app-drag *ngFor="let item of todo" [item]='item'></app-drag>
</div>

应用程序拖动模板：

<div class="example-box" cdkDrag>{{item}}</div>

它呈现为应有的，但是当我尝试拖放元素时，它将失去与cdkDropList元素的连接。我在控制台上也没有任何错误。