angular / angular/components

bug(Overlay): how can i set default panelClass to cdkConnectedOverlay

Đang mở
#32,419 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/overlay 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?

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

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

19.x

### Description

### v19
In Angular CDK v19, I rewrote the overlay behavior to automatically apply different built-in panelClass values depending on the context. This allowed my custom default panelClass to coexist with user-provided panelClass values without being overridden.
```
@Injectable()
export class TestOverlay extends Overlay {
private getOverlayPanelClasses(config: OverlayConfig) {
let classes = ['test']; //'test' is only for examples
if (config.panelClass) {
if (Array.isArray(config.panelClass)) {
classes = classes.concat(config.panelClass);
} else {
classes.push(config.panelClass as string);
}
}
return classes;
}

create(config?: OverlayConfig): OverlayRef {
const overlayConfig: OverlayConfig = {
...config,
panelClass: this.getOverlayPanelClasses(config)
};
return super.create(overlayConfig);
}
}
```

### v21
After upgrading to Angular CDK v21 and switching to injection via the `CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG` token, I found that whenever a component provides `cdkConnectedOverlayPanelClass` , the default panelClass I set through the default config gets completely overridden.

```
{
provide: CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG,
useFactory: () => {
return {
panelClass: 'test',
};
}
}
```

There are many places in my project where cdkConnectedOverlayPanelClass is used. What should I change now?

### Reproduction

StackBlitz link:
Steps to reproduce:
1.
2.

### Expected Behavior

Provide a way to set a default class for panelClass.

### Actual Behavior

Setting CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG is completely overridden by the custom input.

### Environment

- Angular: 21
- CDK/Material: 21
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu):

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

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

Hướng nghiên cứu

Bắt đầu bằng cách truy vết cách CDK_CONNECTED_OVERLAY_DEFAULT_CONFIG và input cdkConnectedOverlayPanelClass được kết hợp trong phần triển khai overlay được kết nối. So sánh hành vi Overlay.create tùy chỉnh trong v19 với đường dẫn cấu hình mặc định trong v21, sau đó xác định một trường hợp kiểm thử có thể tái hiện cho thấy liệu các lớp panel mặc định và từ input có nên được hợp nhất hay không.

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ó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Cần làm rõ
Mức phù hợp với người mới
35/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.