Diseñar el enlace del enrutador activo en angular permite al usuario diferenciar entre el enlace del enrutador activo y los enlaces del enrutador inactivos. Angular proporciona un mecanismo especial para trabajar con enlaces de enrutadores activos.
Acercarse:
- Cree la aplicación Angular que se utilizará.
- Cree el componente de encabezado que contiene los enlaces de navegación.
- Luego aplique el «routerLinkActive» en cada enlace del enrutador y proporcione la clase CSS a esta propiedad. Aquí hemos creado la clase «activa» en el archivo CSS.
- Proporcione el {exacto: verdadero} a la ruta raíz para evitar múltiples enlaces de enrutador activos.
Sintaxis:
<a routerLink="/" routerLinkActive="active" >Home</a>
Ejemplo: hemos creado el componente de encabezado con rutas específicas.
header.component.html
<span> <ul> <li><a routerLink="/" routerLinkActive="active"> Home </a></li> <li><a routerLink="/products" routerLinkActive="active">Products </a></li> <li><a routerLink="/about" routerLinkActive="active">About Us </a></li> <li><a routerLink="/contact" routerLinkActive="active">Contact Us </a></li> </ul> </span> <router-outlet></router-outlet>
Aquí hemos proporcionado el «routerLinkActive», que es una funcionalidad de enrutamiento que activa automáticamente la ruta actual, y también tenemos que proporcionar la clase CSS. Aquí en routerLinkActive = “active” active es una clase CSS que se aplica automáticamente a la ruta activada.
header.component.css
.active{
background: 'white'
}
Pero aquí, todavía causa un problema: nuestra ruta de inicio siempre está activa, incluso si navegamos a otra ruta, la razón detrás de esto es la forma en que funciona «routerLinkActive» . La ruta principal funciona en «localhost:4200/» y otras rutas son «localhost:4200/about» , por lo que «routerLinkActive» encuentra «localhost:4200/» dentro de todas las demás rutas y el enlace del enrutador principal siempre está activo para lidiar con este angular. proporcione otra directiva llamada routerLinkActiveOptions.
Actualizado
header.component.htm
<span>
<ul>
<li><a routerLink="/" routerLinkActive="active"
[routerLinkActiveOptions]={exact:true}>Home
</a></li>
<li><a routerLink="/products"
routerLinkActive="active">Products
</a></li>
<li><a routerLink="/about"
routerLinkActive="active">About Us
</a></li>
<li><a routerLink="/contact"
routerLinkActive="active">Contact Us
</a></li>
</ul>
</span>
<router-outlet></router-outlet>
Por lo tanto, routerLinkActiveOptions permite solo la coincidencia de ruta exacta como ruta activa para el componente Inicio.
Producción:
