angular / angular/components

bug(drag-drop): Wrong type assumed for dropped item in CdkDropList's cdkDropListEntered (alias for "entered")

Đang mở
#29,212 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/drag-drop P4
Ngôn ngữ chính
TypeScript
Star
25k
Fork
6.8k
Merge trung bình
1 ngày 8 giờ
Pull request đã merge (30 ngày)
91

Mô tả

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I'm facing an issue where Typescript won't allow me to use strongly typed version of `CdkDragEnter`. In a service I have a method with defined types for `CdkDragEnter`'s item and container data.

https://github.com/angular/components/blob/main/src/cdk/drag-drop/directives/drop-list.ts#L138

`CdkDropList`'s `entered` is typed like this: `EventEmitter>` which results in `CdkDragEnter`'s 2nd type argument assuming the same type as the 1st argument. That way it won't allow me to define two different types for the container's and the item's data.

### Reproduction

StackBlitz link:
Steps to reproduce:
1. define an element in template
2. add `cdkDropList` directive
3. add arbitrary data to `cdkDropListData` directive
4. add `(cdkDropListEntered)="onDropListEnter($event)` to react to the event
5. define `onDropListEnter` liks this:
```ts
onDropListEnter(event: CdkDragEnter) {
this.dropListEnterEvent.emit(event);
}
```

### Expected Behavior

Typing for `entered` Event Emitter allows different types between item and container data.
This is already the case for the `dropped` Event Emitter which is typed like this: `EventEmitter>`
So I'm guessing that this could already be a possible solution?

### Actual Behavior

`$event` in `(cdkDropListEntered)="onDropListEnter($event)` gets highlighted in red and build fails because `The types of 'container.data' are incompatible between these types.`

### Environment

Angular CLI: 17.3.3
Node: 20.11.0
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 17.3.4
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1703.3
@angular-devkit/build-angular 17.3.3
@angular-devkit/core 17.3.3
@angular-devkit/schematics 17.3.3
@angular/cdk 17.3.3
@angular/cli 17.3.3
@schematics/angular 17.3.3
rxjs 7.8.1
typescript 5.3.3
zone.js 0.14.4

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Bắt đầu tại src/cdk/drag-drop/directives/drop-list.ts, khoảng dòng 138, và kiểm tra kiểu của EventEmitter entered cùng với các tham số generic của CdkDragEnter và emitter dropped. Hoàn thành khi handler cdkDropListEntered có thể sử dụng các kiểu khác nhau cho dữ liệu container và dữ liệu drag-item, đồng thời ví dụ trong issue biên dịch được.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend
Loại issue
Lỗi
Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
48/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.