Question

我有一个要求，我要使用角形材料制作嵌套的拖放组件。所以我必须限制边界。

<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 *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 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.

Answer 1

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

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

此外，绑定到类时，最好使用ngClass：

[ngClass]="item.componentGuid"

角材料中的动态cdkDragBoundary

1 个答案: