angular / angular/components

[CdkDrag]: Allow out of scope binding with drop container

未关闭
#14,099 13 条评论 9 个 reaction 已指派 0 人 在 GitHub 查看
area: cdk/drag-drop feature P4
主要语言
TypeScript
星标
25k
派生
6.8k
平均合并
1 天 8 小时
30 天内合并 PR
91

描述

#### Bug, feature request, or proposal: proposal

#### What is the expected behavior?
`CdkDrag` accepts `CdkDropListContainer` as an `@Input` (in addition to the current injection logic)

#### What is the current behavior?
`CdkDrag` accepts `CdkDropListContainer` from DI (optional) or through direct assignment.

#### What is the use-case or motivation for changing an existing behavior?
When `CdkDropListContainer` comes from DI it requires the drop container to be a direct parent of the drag element.

When working with dynamic content (table, tree, select, or any "portal like" components) it is sometimes not possible to have the container and the drag element in a parent/descendant relationship.

For example: In a `CdkTable` dragging a header cell left/right having the header row as the drop container. The row and cell are not defined as parent/descendant in the template and the view creators will not pass the proper injectables in such case.

The current implementation does not require a drop container, it's optional. So adding an `@Input` is quite simple. The init only happen when actual dragging starts so it shouldn't be an issue.

The `CdkDropList` will require some modifications because it uses a template query to get all of the child drag items it manages. This is also doable... Maybe by having a flag that defines the work mode or another directive that does not use a template query.

When a drag item is assigned a drop container it will notify the container so it can store a ref to it... doing the same when the drag is destroyed or disconnected from the parent drop container.

Thanks!

贡献指南

打开贡献指南

调研方向

阅读 CdkDrag 和 CdkDropList 的实现,先从它们的依赖注入和子 drag 发现行为开始。跟踪动态分配的容器是如何连接和断开连接的,然后将完成定义为支持范围外的 drag/container 关系,同时不丢失现有的基于父级的行为。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend
Issue 类型
功能
难度
5/5
预计耗时
一周以上
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。