feat(CdkPortalOutlet): Introduce signal-friendly way to track portal attachment/detachment
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
### 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
...
...
...
```
Beitragsleitfaden
Rechercherichtung
Beginne mit dem im Issue genannten Einstiegspunkt CdkPortalOutlet und verfolge, wie der Zustand des Anhängens und Ablösens seines Portals bereitgestellt wird. Vergleiche die vorgeschlagenen Signalformen mit dem bestehenden Verhalten von attached und attachedRef. Als abgeschlossen gilt die Aufgabe, wenn Consumer auf Änderungen des Anhängens reagieren können, ohne manuelle Subscriptions oder Bereinigung, und die gewählte API sowie ihr Verhalten durch die Tests des Projekts dokumentiert sind.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 5/5
- Geschätzter Aufwand
- Über eine Woche
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100