angular / angular/components

feat(CdkPortalOutlet): Introduce signal-friendly way to track portal attachment/detachment

Đang mở
#31,929 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
area: cdk/portal feature P3
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

Mở 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

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.