복수 경로가있는 각도 2 라우터 링크?

Question

수업을 하나만 제거하고 싶습니다 (또는 모든 경로에서 수업을 하나 추가하십시오.) 어떻게 가능합니까? 이러한 [routerLinkNOTActive]와 같은 것 또는 유사한 무언가과 같이가,

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

을 또는 : 나는 [routerLink] 아무 소용이 여러 매개 변수를 시도 그래서

<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

다음은 방금 [클래스] 속성을 사용한 최종 솔루션입니다. 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' : ''; 
}