Angular material 嵌套拖放区内的拖放角度

我正在尝试在另一个放置区域内创建放置区域，我希望能够在两个放置区域中放置。为了实现这一点，我尝试使用“cdkDropListConnectedTo”作为所有放置区域的id，但由于某些原因，未检测到子放置区域

stackblitz链接：

---

正如我所见，由于嵌套的DOM元素不允许他触发事件，因此未检测到子区域

您可以这样更改最后一个元素：

<div class="example-container">
  <h2>Done</h2>

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

多恩
{{item}}
{{done}}

正如我所见，由于嵌套的DOM元素不允许他触发事件，因此未检测到子区域

您可以这样更改最后一个元素：

<div class="example-container">
  <h2>Done</h2>

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

多恩
{{item}}
{{done}}