RouterLinkActive initial render state prior to first router navigation
- Lingua principale
- TypeScript
- Stelle
- 101k
- Fork
- 27.5k
- Merge medio
- 1g 19h
- PR unite (30g)
- 288
Descrizione
### Which @angular/* package(s) are relevant/related to the feature request?
router
### Description
Hi team !
I wanted to open this issue to discuss your view regarding the current state of the directive `RouterLinkActive` and your plans regarding it.
Today, this directive has a very neat api and we strongly recommend its usage in our company.
However, the way it handles the display of the active class creates a visually annoying flicker...
You can see the flicker when you open for example https://material.angular.dev/components/categories and notice how the background around the Components button only appears after a short delay.
(Note: angular.dev does not have this behavior but the active class was managed with completely home-made code ? also, angular.dev is missing `aria-current` attributes for the active anchors)
For more context, there are two problems.
First one is the fact the class is added / removed through a queued microtrask.
Second is that at startup / hydration, a call to `router.isActive` will not be correct until the router has performed its first navigation internally...
### Proposed solution
It depends greatly on what's the plan regarding Angular Routing in general...
As the team is working on turning many facets of old Angular into signals (Forms is another example), I guess Routing is in the works.
I have opened the draft PR #62974 that removed the flicker for my internal project, but it probably has a bunch of issues...
### Alternatives considered
I guess copy-pasting the internal code done for angular.dev would work, but I would prefer to use something provided by `@angular/router`...
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia con la direttiva RouterLinkActive in @angular/router e verifica come si comporta router.isActive prima della prima navigazione del router, anche durante l’avvio o l’idratazione. Esamina la bozza della PR #62974 per la direzione proposta finora; il lavoro sarà considerato completato quando la active class non sfarfallerà visibilmente nel rendering iniziale, mantenendo al contempo corretto il comportamento dei link attivi.
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
- Da chiarire
- Idoneità per principianti
- 25/100