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