标签: angular-cdk

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

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

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

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

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

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

但我想做的是，

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

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

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

寻找一种能够使垫对话框既可拖动又可调整大小的方法。到目前为止，我已经使用 cdkDrag (DragDropModule) 完成了可拖动部分。我尝试过使用调整大小：展位；在 css 中，但它似乎与可拖动功能结合使用效果不佳。即，如果我删除 cdk，则可调整大小，反之亦然。

请参阅此处的代码：https ://stackblitz.com/edit/angular-vp8xt7

我有一个示例应用程序，我使用cdk-Dragging. 问题是当我拖动它时，cdk-drag-preview正在应用一个名为的类并使拖动的行变小。

在上面您可以看到，当我尝试拖动时，拖动的行会变得越来越小，直到我将其放下。我希望它和其他的一样大，永远不会改变。我尝试向此类添加属性，但无法使其工作。我怎样才能保持这一行的宽度？

这是我在 stackblitz 上尝试过的：

https://stackblitz.com/edit/angular-gbls7d-or2y5z?file=src/app/cdk-drag-drop-connected-sorting-example.html

我正在使用 cdk-virtual-scroll-viewport 在用户滚动时一次动态渲染一小组项目。

无论为 cdk-virtual-scroll-viewport 元素指定的高度如何，视口仅显示 5 个项目。

在该组件中，我加载了一个包含 100 个字符串的数组。

每个项目的高度为 48px。视口高度设置为 480px。因此，我预计一次会看到 10 个项目。它只渲染 5。

在 HTML 中：

                <cdk-virtual-scroll-viewport itemSize="48" class="viewport">
                    <mat-option *cdkVirtualFor="let person of filteredPersons"
                        [value]="person" class="animated slideInRight">
                        <div class="option-user">
                            <img class="image-cropper"
                                src="......"
                                alt="User Picture" />
                            {{person}}
                        </div>
                    </mat-option>
               </cdk-virtual-scroll-viewport>

在CSS中：

.viewport {
    height: 480px; 
}

.option-user {
    height: 48px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

SelectionModel我希望能在Angular CDK 文档中找到一些相关内容，但始终未能找到。

API页面很多；例如，MatTable 的 Angular Components 文档。是的，代码SelectionModel位于GitHub上，但我想：

1. 阅读概述”，就像 **angular.io* 上的许多此类页面一样，同时还
2. 从angular.io或第三方的示例中学习，以及
3. 阅读代码。

我似乎缺少的是#1，但仅限于某些课程。

其他一些非组件类记录在angular.io中。 MatTableDataSource可以在MatTable API 文档 的右侧栏中找到。好吧，这并不明显，但它是一个有用的位置。我可能期望在CDK Collections page之类的地方找到集合，但可惜它不在那里。

1. angular.io是此类内容的官方位置吗？
2. 我是否错过了查找SelectionModel 课程 API 文档以及其他课程的API 文档的方法cdk\collection，或者我真的只是报告网站错误？

这个问题已经在 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; …

由于 Protractor 已被弃用，我刚刚开始使用 WebdriverIO。

之前我们使用 Angular 的 Component Harness 进行测试。当我们尝试迁移现有测试时，我们发现 Angular 团队实现了“@angular/cdk/testing/selenium-webdriver”作为 Protractor-harness 环境的替代品。

当我将 WebdriverIO 浏览器的对象传递给 SeleniumWebDriverHarnessEnvironment 时，我现在遇到了拦截器。有人可以帮助我找到解决方案吗？

import { SeleniumWebDriverHarnessEnvironment } from "@angular/cdk/testing/selenium-webdriver";
const harnessLoader: HarnessLoader = SeleniumWebDriverHarnessEnvironment.loader(driver);

我收到错误如下

'TypeError: root(...).findElements is not a function'.
at .\src\cdk\testing\selenium-webdriver\selenium-web-driver-harness-environment.ts:43:14

我安装了 @Angular/Material 和 @Angular/cdk 来创建模态叠加。但是，当我在 app.module.ts 中导入 OverlayModule 时，它​​给出了以下错误：

Error: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 3222:40-54\nCan't import the named export 'ApplicationRef' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 3240:11-38\nCan't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 3280:12-39\nCan't import the named export 'ComponentFactoryResolver' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 410:11-19\nCan't import the named export 'DOCUMENT' from non EcmaScript module (only default export is available)\n\nError: ./node_modules/@angular/cdk/fesm2015/overlay.mjs 443:15-23\nCan't import the named …

我尝试使用在Angular CDK: How to set Inputs in a ComponentPortal 中找到的方法 ，但PortalInjector似乎已被弃用，并且没有关于在其位置做什么的实际说明。弃用警告指出“Injector.create改为使用”。但不知道如何使用它、在哪里使用它或者它实际上取代了什么。

我也尝试过研究Material 自己的 Dialog 组件，看看我是否能弄清楚他们是如何做到的，但一无所获。

所以我再次对 Angular 13 提出问题：

How can I pass data into and out of a component that was created using a ComponentPortal()? If the answer is something generic such as using an Injector, can you please point me to an example or documentation on how to do so? A 'hello world' of passing Injectors?