angular / angular/angular

RouterLinkActive initial render state prior to first router navigation

Aperta
#62,973 3 commenti 4 reazioni 0 assegnatari Vedi su GitHub
area: router P4
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.