bug(OverlayContainer, MatDialog): MatDialog not rendering inside custom OverlayContainer in angular 15
- 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ả
In Angular 15, if a component is provided with OverlayContainer and overridden to use it as a custom container element, individual overlay elements are not rendering inside the container (), instead is appended to the document body(default behavior).
```@Injectable()
export class OverlayService extends OverlayContainer{
constructor(
@Inject(DOCUMENT) _document: any,
platform: Platform,
private problem: ElementRef
) {
super(_document, platform);
}
protected override _createContainer(): void {
const containerClass = "cdk-overlay-container";
const container = this._document.createElement("div");
container.classList.add(containerClass);
this.problem.nativeElement.appendChild(container);
this._containerElement = container;
}
}
@Component({
selector: 'app-problem',
templateUrl: './problem.component.html',
styleUrls: ['./problem.component.css'],
providers: [
DialogServiceService,
MatDialog,
{ provide: OverlayContainer, useClass: OverlayService },
]
})
```
Expected behavior:
```
```
I was expecting the MatDialog to render inside the custom container as in previous angular versions.
### What troubleshooting steps have you tried?
Current behavior(Angular 15):
```
```
### Reproduction
https://stackblitz.com/edit/angular-pfwikb?file=src%2Fapp%2Fproblem%2Fproblem.component.ts
### Environment
- Angular: 15
- CDK/Material: 15.1.2
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Mac
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với bản tái hiện trên StackBlitz tại src/app/problem/problem.component.ts và kiểm tra triển khai OverlayService._createContainer cũng như component-level OverlayContainer provider. So sánh DOM được render với cấu trúc custom-container ожида kiến, sau đó xác minh rằng MatDialog sử dụng container đó trên Angular 15. Hoàn thành có nghĩa là hộp thoại được gắn bên trong cdk-overlay-container tùy chỉnh thay vì trực tiếp dưới body.
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ó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 28/100