Angular 2 routerlink with multiple routes?

后端 未结 2 871

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:

相关标签:
2条回答
  • 2021-01-20 06:01

    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' : '';
    }
    
    0 讨论(0)
  • 2021-01-20 06:06

    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.

    0 讨论(0)
提交回复
热议问题