Angular 2 routerlink有多條路由？

Question

我想刪除一個只有一個路由的類，（或者在所有BUT路徑上添加一個類。）這怎么可能？ 我試過帶有多個參數的[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]屬性的最終解決方案。 順便說一下，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' : '';
}