feat(CdkPortalOutlet): Introduce signal-friendly way to track portal attachment/detachment
- 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ả
### Feature Description
Tracking if a portal is attached/detached within a `CdkPortalOutlet` can be cumbersome, it would be a nice improvement to expose the attached portal or the attachment/detachment state as a signal.
### Use Case
We create a component portal on a parent element which will get components attached by its children. In case a component is attached, I need to adapt the styling.
Lets take the following example, my expectation initially was that the class will be set correctly.
```
myOutlet = viewChild(CdkPortalOutlet);
// outlet gets passed to children which will attach components
```
The issue though is that `myOutlet` is only initialized once and changes to the `portal` within are not tracked if there is no other event triggering change detection at the same time. So the code above can actually get out-of-sync.
The best workaround I found is to manually keep track of the attachment/detachment.
This is more complex than it should be and my example is also possibly missing cleanup code
```
myOutlet = viewChild(CdkPortalOutlet);
isOutletAttached = signal(false);
effect(() => {
this.myOutlet()?.attached.subscribe(() => {
this.isOutletAttached.set(true);
this.myOutlet().attachedRef?.onDestroy(() => this.isOutletAttached.set(false));
});
});
...
```
Ideally one of the internal members of the `CdkPortalOutlet` should expose a signal which can be used.
```
myOutlet = viewChild(CdkPortalOutlet);
// multiple options
...
...
...
```
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu với entry point CdkPortalOutlet được nêu trong issue và theo dõi cách trạng thái gắn và tháo portal của nó được expose. So sánh các dạng signal được đề xuất với hành vi hiện có của attached và attachedRef. Công việc được xem là hoàn tất khi consumer có thể phản ứng với các thay đổi trạng thái gắn mà không cần subscription hoặc cleanup thủ công, đồng thời API được chọn và hành vi của nó được ghi lại trong các test của project.
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
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- 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
- 35/100