Angular2 Router V3 und Menüauswahl

Question

Ich möchte, dass mein Menü die aktuelle Route anzeigt, indem eine 'aktive' Klasse auf dem Menüelement (wie in Ng1) basierend auf der aktuellen Route angewendet wird.

@Component({ 
    moduleId: module.id, 
    selector: 'main-menu', 
    directives: [ 
    ROUTER_DIRECTIVES, 
    ], 
    template: ' 
<paper-button #menu1 [data]="['/app/collection']" [routerLink]="['/app/collection']" [ngClass]="{active: isActive(menu1.data)}">My Collection</paper-button> 
<paper-button #menu2 [data]="['/app/book/find']" [routerLink]="['/app/book/find']" [ngClass]="{active: isActive(menu2.data)}">Browse Books</paper-button>' 
}) 
export class MainMenuComponent { 

    public current:string; 

    constructor(public router:Router, private changeDetector:ChangeDetectorRef) { 
    this.router.events.subscribe((e)=> { 
     this.current = e.url; 
    }); 
    } 

    ngOnInit() { 
    this.changeDetector.detectChanges(); 
    } 

    isActive(data) { 
    if (data) { 
     return this.current == data[0]; 
    } 
    } 
} 

So funktioniert das, aber es gibt zwei Probleme, die ich etwas Hilfe lösen möchte:

1) I die this.changeDetector.detectChanges(); Ansonsten ist die aktive Klasse aufrufen müssen nicht auf Anfangslast der Seite angewendet . (Ich verstehe nicht, warum das nicht aus der Box funktioniert ...)

2) In Bezug auf die Vorlage habe ich keinen Weg gefunden, mich selbst nicht in der routerLink zu wiederholen. Ich möchte in der Lage sein, einen ref meiner Daten zu übergeben, wie menu2.data, aber es funktioniert nicht ...

Jede Hilfe/Rat würde geschätzt dank

Answer 1

Im neuen Router können Sie festlegen, welche Klasse sollte zu einem routerLink hinzugefügt werden, wenn die Route aktiv ist:

<a [routerLink]="['/app/collection']" [routerLinkActive]="['active']">Home</a>