Angular 2 routerlink with multiple routes?

问题

I want to remove a class only one ONE route, (Or add a class on all BUT one route.) How is that possible? I have tried [routerLink] with multiple parameters to no avail:

 <div class='body-content' [routerLink]="['/fetch-data', '/counter']" [routerLinkActive]="['col-sm-9']"  > 
        <router-outlet></router-outlet>
    </div>

Or, is there such a thing as [routerLinkNOTActive] or something similar like so:

<div class='body-content' [routerLink]="['/home']" [routerLinkNotActive]="['col-sm-9']">

so, then it would add the 'col-sm-9' class on all routes that are not '/home'. Seems very simple, but can't find anything to do it.

回答1:

I don't know if there is a built in directive to do what you want but you can always add some logic to your component.

In your template,

<div class='body-content' [routerLink]="['/fetch-data', '/counter']" [class]="bodyContentClass()">

And in your component,

bodyContentClass() {
  // router  is an instance of Router, injected in the constructor
  return this.router.isActive('/url-to-make-body-active') || this.router.isActive('/other-url-to-make-body-active') ? 'col-sm-9' : '';
}

You can have fun and test against whatever combination of routes you wish.

回答2:

Here's my final solution which just used the [class] attribute. BTW, What happened to the [ng-class] attribute in Angular2?:

HTML:

<div class='body-content' [class]="bodyContentClass()" > 
    <router-outlet></router-outlet>
</div>

TypeScript:

import {Location} from '@angular/common';
...
constructor(private authService: AuthService,private location: Location) { }
...
bodyContentClass()
{
    // router  is an instance of Router, injected in the constructor
   var viewLocation = location.pathname; 
   return viewLocation == '/counter' || viewLocation == '/fetch-data' ? 'col-sm-9' : '';
}

来源：https://stackoverflow.com/questions/43147756/angular-2-routerlink-with-multiple-routes

标签

angular

routerlink

routerlinkactive