feat(CdkPortalOutlet): Introduce signal-friendly way to track portal attachment/detachment
- Lenguaje dominante
- TypeScript
- Estrellas
- 25k
- Forks
- 6.8k
- Merge medio
- 1 d 8 h
- PR fusionados (30 d)
- 91
Descripción
### 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
...
...
...
```
Guía de contribución
Línea de trabajo
Comienza con el punto de entrada CdkPortalOutlet mencionado en el issue y sigue cómo se expone el estado de adjunción y desadjunción de su portal. Compara las formas de signal propuestas con el comportamiento existente de attached y attachedRef. Se considera terminado cuando los consumidores pueden reaccionar a los cambios de adjunción sin suscripciones ni limpieza manuales, y la API elegida y su comportamiento están documentados por las pruebas del proyecto.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- angular, typescript
- Área
- frontend
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 5/5
- Tiempo estimado
- Más de una semana
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100