具有多条路线的Angular 2 routerlink？

Question

我只想在一条路线上删除一个类(class)，(或者在所有但只有一条路线上添加一个类(class)。)这怎么可能？我已经尝试使用多个参数的 [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']"> 

因此，它会在所有不是“/home”的路由上添加“col-sm-9”类。看起来很简单，但找不到任何东西来做。

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

您可以玩得开心，并根据您希望的任何路线组合进行测试。