angular / angular/components

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

オープン
#31,929 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
area: cdk/portal feature P3
主要言語
TypeScript
スター
25k
フォーク
6.8k
平均マージ
1日 8時間
マージ済み PR(30日)
91

説明

### 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
...
...
...
```

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

issue に記載されているエントリポイント CdkPortalOutlet から始め、その portal のアタッチおよびデタッチの状態がどのように公開されているかを追跡します。提案されている signal の形式を、既存の attached と attachedRef の動作と比較します。完了とは、consumer が手動の subscription や cleanup なしでアタッチの変更に反応でき、選択した API とその動作がプロジェクトのテストによって文書化されている状態です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
angular, typescript
領域
frontend
issue の種類
機能追加
難易度
5/5
見積もり時間
1週間以上
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。