Angular2, How to get the current active component selector to use it as class globally for css styling

Question

I want to apply styling for each component, what i am looking is I want to get the current component selector name and pass it as class name like this

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

so that for every active component I get its selector and set it to div tag for custom css styling..

Does anyone know how to do this ?? Thanks in advance for time and support.

Answer 1

有不同的方法来实现它。

这是一个选项：

<强> *。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;    
}