複数のルートを持つ角2のルータリンク？

Question

私はクラスを1つのルートだけ削除したいです（あるいは、すべてのルートでクラスを追加します）。どのようにそれが可能ですか？それは追加することになり、その

<div class='body-content' [routerLink]="['/home']" [routerLinkNotActive]="['col-sm-9']"> 

：

<div class='body-content' [routerLink]="['/fetch-data', '/counter']" [routerLinkActive]="['col-sm-9']" > 
     <router-outlet></router-outlet> 
    </div> 

または、[routerLinkNOTActive]として、またはそのような類似したものが、このようなものです：私は無駄に複数のパラメータを指定して[routerLink]試してみました'/ 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

[クラス]属性を使用したばかりの最終的な解決方法は次のとおりです。ところで、何がAngular2に[NG-クラス]属性に何が起こった？：

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