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

Я хочу удалить класс только для ОДНОГО маршрута (или добавить класс для всех маршрутов, ИСКЛЮЧАЯ один). Как это возможно? Я пробовал [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». Кажется очень простым, но не могу найти ничего, чтобы сделать это.


angular routerlinkactive routerlink
person Chris J    schedule 31.03.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

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

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

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

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

person snorkpete    schedule 31.03.2017
comment
Хорошо, спасибо. Как бы вы использовали функцию router.isActive? Кажется, этого не существует. - person Chris J; 01.04.2017

arrow_upward
0
arrow_downward

Вот мое окончательное решение, в котором только что использовался атрибут [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' : '';
}
person Chris J    schedule 31.03.2017