Estoy usando angular2 y angular2 [routerLinkActive] en cada enlace para establecer el enlace activo. Todo esto funciona bien. Cuando el usuario hace clic en un enlace, la ruta se activa y el enlace obtiene la clase "activa" inyectada y puedo diseñar en consecuencia.
Sin embargo, en la configuración de la ruta configuré una ruta predeterminada así:
const routes: Routes = [ { path: '', redirectTo: 'gettiingstarted', pathMatch: 'full' },Esto funciona en la medida en que la página ahora carga con éxito el componente "empezando" cuando el usuario navega por primera vez a la página, pero desafortunadamente el enlace del enrutador no ha tenido la clase "activa" inyectada en este punto, por lo que no tiene el estilo correcto. La única forma de obtener la clase activa es hacer clic en el enlace.
¿Alguien sabe cómo puedo hacer que el mecanismo [routerLinkActive] funcione en la carga de la página?
Actualizar Aquí está el código html para el enlace en sí:
<a [routerLink]="['gettingstarted']" [routerLinkActive]="['active']">Poner lo siguiente en el constructor del archivo app.component.ts lo arregló:
this.router.navigate(['/gettingstarted']);No estoy seguro de que sea la solución recomendada, pero lo soluciona en mi caso.
Use isActive: true en routerLinkActiveOptions como este
<a routerLinkActive="active-link" [routerLinkActiveOptions]="{ exact: true, isActive: true }">Home</a>