Angular2, Wie bekomme ich den aktuellen aktiven Komponentenselektor, um ihn als Klasse global für CSS-Styling zu verwenden

Question

Ich möchte Styling für jede Komponente anwenden, was ich suche ist, ich möchte den aktuellen Selektor-Namen und übergeben Sie es als Klasse Namen wie dies

<div [class]="component-slector-name"> 
<router-outlet></router-outlet> 
</div> 

so für, dass jede aktive Komponente I seine Wähler bekommen und setzen sie sich auf div-Tag für benutzerdefiniertes CSS-Styling ..

Wer weiß, wie dies zu tun ?? Vielen Dank im Voraus für Zeit und Unterstützung.

Answer 1

Es gibt verschiedene Möglichkeiten, dies zu erreichen.

Hier ist eine Option:

* .html

<div [class]="activeSelector"> 
    <router-outlet (activate)="onActivated($event)"></router-outlet> 
</div> 

* .ts

activeSelector: string; 

constructor(private resolver: ComponentFactoryResolver) {} 

onActivated(component) { 
    this.activeSelector = 
     this.resolver.resolveComponentFactory(component.constructor).selector;  
}