angular / angular/components

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

Ouverte
#31,929 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
area: cdk/portal feature P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par le point d’entrée CdkPortalOutlet mentionné dans l’issue et suivez la manière dont l’état d’attachement et de détachement de son portail est exposé. Comparez les formes de signal proposées au comportement existant de attached et attachedRef. Le travail est considéré comme terminé lorsque les consommateurs peuvent réagir aux changements d’attachement sans abonnements ni nettoyage manuels, et que l’API choisie ainsi que son comportement sont documentés par les tests du projet.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Fonctionnalité
Difficulté
5/5
Temps estimé
Plus d'une semaine
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.