Angular 材质中的动态 cdkDragBoundary答案

【问题标题】：Dynamic cdkDragBoundary in Angular MaterialAngular 材质中的动态 cdkDragBoundary
【发布时间】：2019-12-09 11:21:07
【问题描述】：

我有一个要求，我正在使用 Angular Material 制作嵌套的拖放组件。所以我必须限制界限。

<ul cdkDropList [cdkDropListConnectedTo]="listIds">
   <li *ngFor="let item of array" cdkDrag>  ///item = {name: 'Adam', children: [...etc]}
        ....some work here
        <ng-container *ngIf="item.children.length > 0">
            /// call the <ul> again recursively
        </ng-container>
   </li>
</ul>

一切都很好，但我想限制边界，所以我在ul 中添加了动态类，

<ul cdkDropList [cdkDropListConnectedTo]="listIds" class="{{item.componentGuid}}"> 
/// class becomes some guid, eg: class="asd-123-qwe"

想用同一个类来li拖动，

<li *ngFor="let item of array" cdkDrag cdkDragBoundary=""> 
 //this takes string like,    cdkDragBoundary="here class name given in ul",

如果ul 有类test-boundary，

<ul cdkDropList [cdkDropListConnectedTo]="listIds" class="test-boundary" >,

那么li就是，

<li cdkDragBoundary=".test-boundary" cdkDrag>

但如果ul 有一个动态类，

eg:class="{{item.componentGuid}}, which will resolve to 
   class="asd-123-qwe", then how do I add that to cdkDragBoundary??

我尝试过的事情。

<li [cdkDragBoundary]="item.componentGuid" and few others.

【问题讨论】：

标签： angular drag-and-drop angular-material angular-cdk

【解决方案1】：

您还必须添加点，因为它将作为查询选择器处理

<li [cdkDragBoundary]="'.' + item.componentGuid" cdkDrag>

另外，当绑定到一个类时，最好使用ngClass：

[ngClass]="item.componentGuid"

【讨论】：

无法绑定到“cdkDragBoundary”，因为它不是“li”的已知属性。 cdkDragBoundary 来自角度材质，给边界限制，不能用类代替。
@MichaelPhilips 好吧，你需要在 li 中添加 cdkDrag 指令
试过了，同样的问题:(
@MichaelPhilips 为什么要将边界限制为某个项目。 item.componentGuid 甚至不应该在 <ul> 级别可用。