angular / angular/angular

RouterLinkActive initial render state prior to first router navigation

Abierto
#62,973 3 comentarios 4 reacciones 0 asignados Ver en GitHub
area: router P4
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

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.