feat(CdkPortalOutlet): Introduce signal-friendly way to track portal attachment/detachment
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
...
...
...
```
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dal punto di ingresso CdkPortalOutlet indicato nell’issue e segui come viene esposto lo stato di collegamento e scollegamento del relativo portal. Confronta le forme di signal proposte con il comportamento esistente di attached e attachedRef. Il lavoro è completato quando i consumer possono reagire alle modifiche del collegamento senza subscription o cleanup manuali e l’API scelta e il suo comportamento sono documentati dai test del progetto.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Funzionalità
- Difficoltà
- 5/5
- Tempo stimato
- Più di una settimana
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 35/100