0
240
Viewsla ruta activa angular 2 está en una sola ruta
digamos que tengo el siguiente html que especifica enlaces para diferentes partes.
<a [routerLink]="['/']" [queryParams]="{'Analytics':700}" routerLinkActive="active" [routerLinkActiveOptions]="{exact:false}">Home</a> <input type="text" #id (input)="0"/> <a [routerLink]="['user',id.value]" [queryParams]="{'Analytics':500}" routerLinkActive="active" [routerLinkActiveOptions]="{exact:false}">User</a> <button type="button" class="btn btn-default" (click)="onNavigate()">click me</button> <hr>lo que espero es que para una ruta dada como /usuario/15/editar, mis dos enlaces se pusieron rojos (están afectados por la clase activa), sin embargo, funcionan solo para rutas exactas , es decir, cuando hago clic en el mismo enlace, eso se activaría .
la URL anterior es a la que se refiere el enlace del Usuario.
1 answers
Answer question0
Puede usar ngClass en este caso para agregar una clase activa basada en alguna lógica de enrutamiento. Esto es de alguna forma lo que hace routerLinkActive. Así que puedes hacer algo como esto:
<a [routerLink]="['/']" [queryParams]="{'Analytics':700}" [ngClass]="{ 'active' : isMyRoute }">Home</a>Y en su componente, use Router y ActivatedRoute para verificar el nombre del componente recorriendo el árbol de ruta que se muestra en la salida del enrutador y alternar una variable basada en eso:
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router'; ... public isMyRoute: boolean; constructor(private router: Router, private route: ActivatedRoute) {} ngOnInit() { this.router.events.subscribe(res => { if (res instanceof NavigationEnd) { let fn = this.route.children[0].component; let componentName = fn['name']; if (componentName === 'UserEditComponent') { this.isMyRoute = true; } else { this.isMyRoute = false; } } }) }