Angular [CDK v10+] 在拖放 CDK 中找不到合适的替代“进入”已弃用功能的方法

Question

我在 stackblitz 中错误地使用了 10 岁以上的 Angular 版本（某种代码窗格）。

在这里我找到了移动函数输入github。 但这对我的情况没有帮助。 基于网格的拖放，具有在不同可拖动容器之间拖动的能力。从angular dragdrop grid 分叉。 升级到最新版本 (12.1.2) 时出现的唯一错误是这里

this.placeholder.enter(
  drag,
  drag.element.nativeElement.offsetLeft,
  drag.element.nativeElement.offsetTop
);

错误：Property 'enter' does not exist on type 'CdkDropList<any>'

我找到的唯一参考是来自stack-overflow 的这个页面。 当我尝试解决方案时，行为被搞砸了，控制台正在记录此错误ncaught RangeError: Maximum call stack size exceeded。

目前this is the state。

我希望将此功能转移到最新的 CDK 版本而不丢失该功能。

当我在版本之间来回切换时，我注意到cdkDropListEnterPredicate 的行为无法正常工作。

在 v9 cdkDropListEnterPredicate 中，每个像素都调用函数，但对于 v 12，行为发生了变化。

要查看操作中的错误，请转到 package.json 并从 "@angular/cdk": "9.1.2" 更改 至："@angular/cdk": "12.1.2" 我曾尝试使用dragRef 和dropListRef 但失败了。

Answer 1

请点击查看示例...... [这里] (https://stackblitz.com/edit/angular-cdk-drag-drop-sortable-flex-wrap-if3hjb?file=src/app/app.component.html)

现在有了新版本，我们可以用单个方法（cdkDragEntered）替换所有以前的方法，它会处理所有事情。