3

我只想删除一个类，只有一条路线，（或在所有但一条路线上添加一个类。）这怎么可能？我试过 [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”类。看起来很简单，但找不到任何事情要做。

4

2 回答 2

3

我不知道是否有一个内置指令来做你想做的事，但你总是可以为你的组件添加一些逻辑。

在您的模板中，

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

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

于 2017-03-31T19:03:22.773 回答
0

这是我的最终解决方案，它只使用了 [class] 属性。顺便说一句，Angular2 中的 [ng-class] 属性发生了什么？：

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' : '';
}
于 2017-03-31T21:24:28.387 回答