0
251
Viewsangular 2 active route is on single route
say that I have the following html that specifies links for different parts.
<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>
what I expect is that for a given path like /user/15/edit my both links became red (are affected by active class)however they work for just exact paths that is just when I click on the very link ,that would be activated.
the above url is that the User link refers to.
·
Santiago Trujillo
1 answers
Answer question0
You can use ngClass in this case to add an active class based on some routing logic. This is in some shape or form what routerLinkActive does. So you can do something like this:
<a [routerLink]="['/']" [queryParams]="{'Analytics':700}" [ngClass]="{ 'active' : isMyRoute }">Home</a>
And in your component use Router and ActivatedRoute to check for the component name by traversing the route tree that is displayed in router outlet and toggle a variable based on that:
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;
}
}
})
}
·
Santiago Trujillo
Report
Answer question