Angular Material嵌套拖拽组件中动态设置cdkDragBoundary的问题

我明白你遇到的问题了——你想让每个嵌套的拖拽项（<li>）只能在其父级的拖拽列表（<ul>）范围内移动，但直接把item.componentGuid绑定到cdkDragBoundary不生效，这是因为**cdkDragBoundary需要的是完整的CSS选择器字符串**，而非单纯的类名。

核心解决方案 #

你只需要在绑定cdkDragBoundary时，给item.componentGuid前面加上类选择器的.前缀，通过字符串拼接实现：

<li *ngFor="let item of array" cdkDrag [cdkDragBoundary]="'.' + item.componentGuid">
  {{ item.name }}
  <ng-container *ngIf="item.children.length > 0">
    <!-- 递归调用的ul，推荐用属性绑定替代插值语法 -->
    <ul cdkDropList [cdkDropListConnectedTo]="listIds" [class]="item.componentGuid">
      <!-- 递归渲染子项 -->
      <ng-container *ngTemplateOutlet="recursiveItemTemplate; context:{ $implicit: item.children }"></ng-container>
    </ul>
  </ng-container>
</li>

<!-- 定义递归模板，让代码更清晰易维护 -->
<ng-template #recursiveItemTemplate let-items>
  <li *ngFor="let item of items" cdkDrag [cdkDragBoundary]="'.' + item.componentGuid">
    {{ item.name }}
    <ng-container *ngIf="item.children.length > 0">
      <ul cdkDropList [cdkDropListConnectedTo]="listIds" [class]="item.componentGuid">
        <ng-container *ngTemplateOutlet="recursiveItemTemplate; context:{ $implicit: item.children }"></ng-container>
      </ul>
    </ng-container>
  </li>
</ng-template>

为什么之前的尝试失败？ #

当你写[cdkDragBoundary]="item.componentGuid"时，传递的是类似asd-123-qwe的字符串，这不是有效的CSS选择器——CSS类选择器必须以.开头。Angular Material的cdkDragBoundary会根据这个选择器查找对应的容器元素，找不到就无法生效。而拼接成'.' + item.componentGuid后，传递的是.asd-123-qwe，就能精准匹配到父级<ul>的类了。

额外优化建议 #

1. 用Angular属性绑定[class]="item.componentGuid"替代插值表达式class="{{item.componentGuid}}"，这更符合Angular最佳实践，还能避免潜在的XSS风险。
2. 确保每个item.componentGuid都是唯一值，这样每个嵌套的拖拽列表都有专属类，拖拽边界不会互相干扰。

内容的提问来源于stack exchange，提问作者Uzair Khan