Angular 2 routerlink mit mehreren Routen?

Question

Ich möchte eine Klasse nur eine einzige Route entfernen (Oder fügen Sie eine Klasse auf allen anderen Routen hinzu.) Wie ist das möglich? Ich habe versucht, [Router] mit mehreren Parametern ohne Erfolg:

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

Oder ist es so etwas wie [routerLinkNOTActive] oder etwas ähnliches wie so:

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

so, dann wäre es hinzufügen die Klasse 'col-sm-9' auf allen Routen, die nicht '/ home' sind. Scheint sehr einfach, aber kann nichts finden, um es zu tun.

Answer 1

Ich weiß nicht, ob es eine eingebaute Direktive gibt, um zu tun, was Sie wollen, aber Sie können Ihrer Komponente immer etwas Logik hinzufügen.

in Ihrer Vorlage,

<div class='body-content' [routerLink]="['/fetch-data', '/counter']" [class]="bodyContentClass()"> 

Und in Ihrer Komponente,

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

Sie können gegen Spaß und Test haben, was auch immer Kombination von Routen, die Sie wünschen.

Answer 2

Hier ist meine letzte Lösung, die nur das Attribut [Klasse] verwendet. BTW, was in Angular2 auf die [ng-Klasse] Attribut passiert ?:

HTML:

<div class='body-content' [class]="bodyContentClass()" > 
    <router-outlet></router-outlet> 
</div> 

Typoskript:

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