标签: angular-cdk

在移动设备上尤其明显。每当用户滚动时它都会立即刷新，如果用户快速滚动，则很难渲染？

我在使用 Angular CDK 中的拖放模块时遇到了问题。我在容器 div 中使用它，它具有（除其他外）以下 CSS 属性：

display: flex;
flex-wrap: wrap;

该flex_wrap属性位于此处，以便如果包含的可拖动元素不适合容器，则它们会换行到第二行，依此类推。

由于拖动是水平的 ( cdkDropListOrientation="horizontal")，当所有元素都适合一行时，这可以正常工作，但是一旦它们换行到第二行，拖放就会变得有问题。我做了以下 stackblitz 来重现错误：https ://stackblitz.com/edit/angular-fytgp6 。

如果有人知道如何解决此问题或考虑解决此问题的方法，那将有很大帮助！

使用@angular/cdk 7.2.1：如果定义一个包含 cdkDropList 和嵌套的 cdkDrag 组件列表的父组件，则在嵌套的子组件中定义 cdkDragHandle 不起作用。如果相同的结构都在同一个组件中，则 cdkDragHandle 可以完美地工作。

https://stackblitz.com/edit/angular-wfvmuj?embed=1&file=src/app/hello.component.html

即使没有在与 cdkDrag 相同的组件中定义，是否有人找到了使 cdkDragHandle 工作的修复程序？

我真的想了解叠加位置参数,但没有任何运气.我也找不到任何关于这个主题的文档.

以下代码是什么意思？

const positions = [
  new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
  new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
];
this.positionStrategy = this._overlay.position()
.flexibleConnectedTo(this.getConnectedElement())
.withPositions(positions)
.withFlexibleDimensions(false)
.withPush(false);

我正在运行一个材质对话框组件的玩笑单元测试，我cdkFocusInitial在对话框中的输入元素上进行了测试。这在运行应用程序时非常有效，但是当我在 Jest 中运行单元测试时，我收到以下错误：

console.warn node_modules/@angular/cdk/bundles/cdk-a11y.umd.js:1861
    Element matching '[cdkFocusInitial]' is not focusable. HTMLInputElement {
      __zone_symbol__inputfalse: null,
      __zone_symbol__blurfalse: null,
      __zone_symbol__compositionstartfalse: null,
      __zone_symbol__compositionendfalse: null,
      __zone_symbol__focusfalse: null,
      __zone_symbol__animationstartfalse: null,
      [Symbol(SameObject caches)]: [Object: null prototype] { classList: DOMTokenList {} }
    }

我试图在 stackblitz 中设置 jest 来重现，但我的组件本质上看起来与官方对话框示例非常相似。我在此处克隆了该示例，并添加了cdkFocusInitial. 当您打开对话框时，焦点按预期设置：

我希望您能帮助弄清楚我可以尝试修复/删除此警告的方法。

解决方法

在 beforeEach 函数中，我像这样模拟 console.warning：

 beforeEach(() => {
       // Removes "'[cdkFocusInitial]' is not focusable" warning when running tests
       console.warn = jest.fn();
    });

我在我的应用程序中使用了Angular Material CDK 拖放功能。拖放功能工作正常，除非我在对话框中使用它（对于大多数组件，我使用的是 Nebular，在这种情况下是 Nebular 对话框）。我遇到的问题是，只要我在对话框中拖动一个可拖动元素，该元素就会消失在对话框后面。放下后，它重新出现在正确的位置。在屏幕截图中，我将“AAAA”元素拖离列表 - 它消失在对话框后面。

Stackblitz：https ://stackblitz.com/edit/angular-znqckb

我正在使用以下实现：

 <div cdkDropList cdkDropListOrientation="horizontal" class="example-list" [cdkDropListData]="techs"
     (cdkDropListDropped)="drop($event)">
     <button *ngFor="let tech of techs" nbButton cdkDrag>{{tech}}</button>
 </div>

组件.ts：

drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.techs, event.previousIndex, event.currentIndex);
}

我没有修改样式表。我认为可以通过修改 z-index 以某种方式解决此问题，但我不知道如何将其应用于“拖动”元素。

我正在使用服务来使用组件门户实例化Angular Material CDK Overlays.

创建门户并将其附加到覆盖后,是否有任何方法可以访问门户创建的组件的组件引用？我希望能够从外部收听该组件的事件.例如:

const portal = new ComponentPortal(MyCoolComponent, /* ...etc */);
this.overlay.attach(portal);
// I'd like to be able to do something like...
// portal.MyCoolComponent.someEventEmitter.subscribe();

我已经搜索了文档和来源,找不到办法做到这一点.我可能不得不求助于从服务中注入一个非常混乱的组件回调.

有谁知道如何做到这一点？

我正在一个应用程序实现新的拖放从角度材料CDK和我试图取消元素按下的拖动事件Esc,我的意思是,我开始拖动元素,但如果我按,Esc而我拖动元素,它应该回到我开始拖动它的位置,到目前为止我还没有找到一种方法来做到这一点,有谁知道我怎么能这样做.关于这个任何想法的cdk文档中没有任何内容.我尝试做这样的事情.

模板

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" (cdkDragEnded)="onDragEnded($event)" cdkDrag>{{movie}}</div>
</div>

Ts分量

onDragEnded(event: CdkDragEnd) {
  console.log(event)
  event.source.element.nativeElement.style.transform = 'none';
  const source: any = event.source;
  source._passiveTransform = { x: 0, y: 0 };
}

但到目前为止没有成功.

我有 2 个列表（左边的首都和右边的国家）。我希望能够移动国家列表上的首都，并允许用户删除该国家的首都。问题是国家列表元素开始移动/移动（以允许插入大写）。但我只想排在首位，如果匹配，请提供一条消息并从两个列表中删除城市+国家/地区。

当我将城市元素拖到国家/地区列表元素上时，如何禁用目标国家/地区列表中的排序或元素移动？谢谢！

<div cdkDropList
     [cdkDropListData]="capitals"
     #capitalsList="cdkDropList"
     [cdkDropListConnectedTo]="countryList">
  <div cdkDrag
       (cdkDragReleased)="onDragReleased($event)"
       cdkDragBoundary=".row"
       class="bg-info text-center border p-2"
       *ngFor="let capital of capitals">{{ capital }}
  </div>
</div>


<div cdkDropList
     cdkDropListDisabled
     [cdkDropListData]="countries"
     #countryList="cdkDropList"
     [cdkDropListConnectedTo]="capitalsList"
     (cdkDropListDropped)="onDropListDropped($event)">
  <div cdkDrag
       cdkDragDisabled
       class="text-center border p-2"
       *ngFor="let country of countries">{{ country }}
  </div>
</div>

我使用的是 Angular 10，单击后将执行以下函数来执行方向更改：

private changeHtmlDirection(direction: 'rtl' | 'ltr') {
    document.getElementsByTagName("html")[0].dir = direction;
}

它运行良好，只是 Angular CDK 没有更新。

我试图找到一个 API 来在运行时更改 Angular CDK 的方向，但没有找到。我看到有一个BidiModule，但它仅用于获取当前方向而不是设置它。

有什么解决办法吗？