Estilo de enlace de enrutador activo en Angular

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:

Publicación traducida automáticamente

Artículo escrito por daya1331 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *