标签: angular-cdk

我使用<cdk-virtual-scroll-viewport>固定项目大小进行虚拟滚动。

此外，我使用ActiveDescendantKeyManagerCDK A11y 提供的功能在视口内使用箭头键移动。

当我尝试同时使用它们时，出现以下问题：

由于虚拟滚动仅加载部分信息并在滚动（回收视图）时加载更多信息，因此ActiveDescendantKeyManager仅获取<cdk-virtual-scroll-viewport>. 当我加载更多时，索引会重复自己，因为虚拟滚动添加和删除项目，keyManager只是行为很奇怪，因为我希望索引按顺序排列（如果我有 5000 个项目，我希望索引按顺序排列，而不仅仅是从1-24，每次我滚动它们都会重复）。 这是 stackblitz 上的一个例子

我的问题是：有什么办法可以与他们一起工作吗？因为我想做的是用箭头键移动到以下滚动索引。

我知道 cdk 拖放可以很好地处理列表，并且有很多示例。

但我想做的是，

一侧是列表，另一侧是容器。容器中的物品应该位于容器中的任何位置，并且可以由 x 和 y 轴固定。

因此，当从列表中拖放到容器中的某个 (x,y) 时，该项目应保持该位置。

请帮助我。如果可能，请提供代码示例。

我在这个Stackblitz上用最少的代码重现了这个问题。

我在新窗口上打开了我的部分组件，但它仍然应该能够与我的主应用程序进行交互。我使用DomPortalHost来实现这一点。交互成功，但样式未加载到新窗口中。

如何强制新窗口与主应用程序的风格相匹配？

主要应用

窗户：

我有一个我使用过的可拖动元素，它对我cdkDrag来说很好用。现在，我需要在点击元素时切换一个标志。但是当我拖动元素并放下时，点击事件会触发。能否请你建议如何工作，cdkDrag和click在一起。共享相同的代码片段。

        <div class="draggable-content" cdkDragBoundary=".drop-area" cdkDrag>
          <div class="min-workspace-view" *ngIf="showMinWorkspace === true">
            <mat-icon svgIcon="workspace" class="workspace-icon"
              (click)="$event.stopPropagation(); showMinWorkspace = !showMinWorkspace">
            </mat-icon>
          </div>
        </div>

期望是：当元素被拖动然后点击不应触发。当元素被点击时，则不应触发拖动事件。

当我检查该项目时，它似乎已被激活。这个类是：“cdk-drop-list-receiving”。我如何做我不想以任何方式丢失的东西？先感谢您。

替代图片网址：https : //i.hizliresim.com/DOOkP6.gif

这不是我独有的问题。您还可以查看示例。执行一次转移操作，离开前你会发现它从列表中“隐藏”了。 https://stackblitz.com/edit/angular-cdk-drag-drop

不释放我想要的元素就不要让他消失。

我有多个 CdkDrag 元素，它们是从我组件中数组上的 ngFor 循环呈现的。当我删除一个元素时，我会拼接数组。然后一些元素将更新那里的位置。我该如何避免？

我试图在删除其中一个元素之前获取所有可拖动元素的 freeDragPosition，然后重置它们的位置，但它没有用。

这是我的 app.component.html

<div class="container" id="container">
  <div *ngFor="let f of fields; let i = index;" 
    class="textField"
    [attr.data-guid]="f.guid"  
    (mouseenter)="onFieldHover($event)" 
    cdkDrag 
    cdkDragBoundary="#container"
    (cdkDragEnded)="onDragEnded($event)"
    [cdkDragFreeDragPosition]="f.position">
    <div class="textField-inner">
      <span style="color: hotpink; font-weight: bold">{{f.guid}}</span>
    </div>
    <div class="textField-options">
      <div class="textField-move" cdkDragHandle>
        <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
          <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </div>
      <div class="textField-remove">
        <i class="fas fa-trash-alt" (click)="onRemoveTextField(i)"></i>
      </div>
    </div>
  </div>
</div>
<button type="button" (click)="onTextFieldAdded()">Add a …

我正在尝试将 angular material 和 cdk 从版本 7 更新到 8。包更新对两者都很好，但是每次迁移都失败，并出现一个非常“有用”的错误

无法读取未定义迁移失败的属性“绿色”。有关更多详细信息，请参见上文。

我很难追踪这可能来自哪里。我在我的项目中对“绿色”进行了通用搜索，但一无所获。我已经擦除了我的 node_modules 并重新安装，但继续得到这个。

我什至在尝试单独执行迁移时得到了这个

ng update @angular/material@8 --migrationOnly=true --from=7 --to=8

任何建议/帮助将不胜感激。

由于某些条件，我试图找到一种如何通过使用 CDK 禁用删除的方法。如果我想删除的列表为空，则应禁用。我找不到在 .ts 文件中的方法中执行此操作的方法.有一些 HTML 指令，但对我没有用。

if(event.container.data.length==1){
  event.previousContainer.disabled=true;
}

我找到了用于拖动容器的 .disabled 方法，但它仅在我拖动时有效。我需要一个事件来放置。

https://stackblitz.com/edit/angular-ui7u9m?file=src/app/cdk-drag-drop-disabled-sorting-example.ts

在这个 stackblitz 示例中，有两个列表，例如，当 Avilable 列表为空（数组中没有元素）时，不应再向此列表中删除。你能帮我这样做吗？

这个问题已经在 SO 上多次提出，但不是最近，这里的例子比我见过的其他例子更完整。拖放用材质树的最好的FPGA实现是这样的一个张贴在这里的媒体通过@ inorganik。

我在这里克隆了 StackBlitz。

但是，我的问题是只有在节点上至少有一个子元素时才能移动节点。例如，如果您从 Application 中删除所有子节点，然后尝试将其添加回 Application。

如果节点有兄弟节点，则删除的节点只会插入到父节点中，在第 232 行：

    // insert node 
    const newSiblings = findNodeSiblings(changedData, nodeAtDest.id);
    if (!newSiblings) return;
    newSiblings.splice(relativeIndex, 0, nodeToInsert);

对我来说，解决方案是跟踪用户在放下移动节点时是否将其悬停在另一个节点上似乎合乎逻辑，然后假设用户希望将悬停节点设为父节点，请查看屏幕截图：

我的问题是：这是解决这个问题的最佳方法吗？如果是这样，如何使用 Angular Drag Drop CDK 跟踪悬停的节点？

更新：

我已经让这个功能部分工作了。我在这里更新了StackBlitz。

我dragHover根据我发现的 mat-tree DnD 的其他实现更新了该方法，它根据用户将悬停节点拖动到右侧的距离设置插入模式：

  dragHover(node: FileFlatNode) {
    // untype the event
    const newEvent: any = event;
    const percentageX = newEvent.offsetX / newEvent.target.clientWidth;
    if (percentageX > .25) {
      this.dragNodeInsertToParent = true;
    } else {
      this.dragNodeInsertToParent = false; …

我正在使用来自 Angular Material 的 Angular CDK 拖放（请参阅此处的文档）。我想知道是否可以禁用cdkDrag. 问题是无法input使用鼠标选择可拖动元素中写入的内容。

所以，我想要做的是禁止拖动input具有cdkDrag指令的元素下的所有元素。

我试过使用：

• cdkDragHandle：这会将拖动放在特定元素上，而不是我想在这里做的
• cdkDragDisabled：这将禁止拖动整个元素，而不是我想在这里做的

这是我的代码的样子：

<div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let element of array" cdkDrag>
        <div>
            <mat-form-field>
                <mat-label>Input 1</mat-label>
                <input matInput type="text">
            </mat-form-field>
            <mat-form-field>
                <mat-label>Input 2</mat-label>
                <input matInput type="number">
            </mat-form-field>
        </div>
    </div>
</div>

提前感谢您的帮助和时间。