Angular 2与多个路由的routerlink？

Question

我想删除一个班级只有一个ONE路线，（或者在所有但是一条路线上添加一个班级。）这怎么可能？我曾尝试与多个参数无济于事[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' : ''; 
} 

你可以对你所希望的任何途径的组合乐趣和测试。

Answer 2

这是我刚刚使用[class]属性的最终解决方案。 BTW，发生在[纳克级]属性什么的？：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' : ''; 
}