0
400
Vistas¿Cómo habilitar li focus en Angular mientras se reutiliza un componente de navegación?
Estoy diseñando una barra de navegación vertical donde el usuario hace clic en el enlace del elemento de la lista y se enrutará a otro componente y al mismo tiempo lo cambiará a gris . Actualmente estoy reutilizando el componente de navegación vertical de la galería en cada uno de los componentes de artes/naturaleza/animales.
Sin embargo, el comportamiento no se espera cuando el usuario se enruta a otro componente, tengo que hacer clic en el mismo enlace del elemento de la lista y luego se configurará para enfocar. Intenté esto en un html/css normal. Funciona perfectamente pero no funciona en Angular.
¿Podría alguien ayudarme con esto?
Aquí están mis códigos para la barra de navegación vertical de mi Galería:
galería.componente.html
<nav> <ul> <li tabIndex="1"><a routerLink="/arts">Arts</a></li> </ul> <ul> <li tabIndex="1"><a routerLink="/nature">Nature</a></li> </ul> <ul> <li tabIndex="1"><a routerLink="/animals">Animals</a></li> </ul> </nav>galería.componente.css
ul { list-style: none; } li { padding: 10px; border: 1px solid #d1d1d1; } /* handles when user is focusing on a menu */ li a:focus { background-color: #8a8a8a !important; color: white; }1 Respuestas
Responde la pregunta0
Esto sucede porque en HTML/CSS normal no vuelves a renderizar el DOM cuando haces clic en un enlace (supongo), por lo que permanece "activo". Según los documentos :
Un enlace se activa cuando haces clic en él.
Activo tiene estado en su HTML y solo ocurre cuando hace clic en el enlace. Si actualiza la página, por ejemplo, el estado activo es brindis. Creo que estás buscando RouterLinkActive :
Realiza un seguimiento de si la ruta vinculada de un elemento está actualmente activa y le permite especificar una o más clases de CSS para agregar al elemento cuando la ruta vinculada está activa.
Intente cambiar gallery.component.html a:
<nav> <ul> <li tabIndex="1"> <a routerLink="/arts" routerLinkActive="active-link">Arts</a> </li> </ul> <ul> <li tabIndex="1"> <a routerLink="/nature" routerLinkActive="active-link">Nature</a> </li> </ul> <ul> <li tabIndex="1"> <a routerLink="/animals" routerLinkActive="active-link">Animals</a> </li> </ul> </nav>... y en galería.component.css :
ul { list-style: none; } li { padding: 10px; border: 1px solid #d1d1d1; } /* Applied when link is active */ .active-link { background-color: #8a8a8a !important; color: white; } Ahora, la directiva RouterLinkActive observará los cambios del enrutador y aplicará la clase de enlace activo al enlace activo . Esto es importante porque si el usuario, por ejemplo, navega directamente a /arts , querrá que se aplique el estado activo, ¿verdad? Lo mismo si usan su botón Atrás.