Angular 2 routerlink с несколькими маршрутами?

Question

Я хочу удалить класс только одним ОДНЫМ маршрутом (или добавить класс на все НО одним маршрутом.) Как это возможно? Я попытался [routerLink] с несколькими параметрами, но безрезультатно:

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

Или есть такая вещь, как [routerLinkNOTActive] или что-то подобное:

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

поэтому он добавил бы класс 'col-sm-9' на все маршруты, которые не являются "/ home". Кажется очень простым, но не могу найти ничего, чтобы сделать это.

Answer 1

Я не знаю, есть ли встроенная директива, чтобы делать то, что вы хотите, но вы всегда можете добавить некоторую логику в свой компонент.

В вашем шаблоне

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

И в вашем компоненте

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' : '';
}

Вы можете повеселиться и протестировать любую комбинацию маршрутов, которую пожелаете.

Answer 2

Вот мое окончательное решение, которое только что использовало атрибут [class]. Кстати, что случилось с атрибутом [ng-class] в Angular2?:

HTML:

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

Машинопись:

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' : '';
}