1
Die Direktive [routerLink] des Angular Routers fügt der aktiven Verbindung die CSS-Klasse router-link-active hinzu. Ich möchte eine Direktive basierend auf dieser Klasse schreiben.Angular2-Direktive basierend auf dynamisch hinzugefügter CSS-Klasse
import { Directive, ElementRef} from '@angular/core';
@Directive({selector: '.router-link-active'})
export class HighlightDirective {
constructor(el:ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
Allerdings funktioniert es nicht wie ich es erwarte.
Es funktioniert, wenn Richtlinie hart in Vorlage codiert:
<a class="router-link-active">Feature1</a>
aber es funktioniert nicht, wenn CSS-Klasse dynamisch durch routerLink hinzugefügt wird:
<a [routerLink]="['/feature1']">Feature1</a>
Obwohl CSS-Klasse hinzugefügt wird, Richtlinie Code wird nicht ausgelöst.
Dies sind meine allerersten Schritte mit Angular2, also ist die Lösung vielleicht einfach, aber ich kann die Antwort nicht finden.