RouterLinkActive initial render state prior to first router navigation
- Lenguaje dominante
- TypeScript
- Estrellas
- 101k
- Forks
- 27.5k
- Merge medio
- 1 d 19 h
- PR fusionados (30 d)
- 288
Descripción
### 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`...
Guía de contribución
Línea de trabajo
Comienza con la directiva RouterLinkActive en @angular/router e inspecciona cómo se comporta router.isActive antes de la primera navegación del router, incluso durante el inicio o la hidratación. Revisa el PR en borrador #62974 para conocer la dirección propuesta hasta ahora; se considerará terminado cuando la active class no parpadee visiblemente en el renderizado inicial, mientras el comportamiento de los enlaces activos siga siendo correcto.
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
- Necesita aclaración
- Aptitud para principiantes
- 25/100