Angular2，如何获取当前的活动组件选择器以将其全局用作css样式的类 [英] Angular2, How to get the current active component selector to use it as class globally for css styling

问题描述

我想为每个组件应用样式，我正在寻找的是我想要获取当前的组件选择器名称，并将其作为类名传递给这样的

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>

因此，对于每个活动组件，我都会得到其选择器，并将其设置为div标签以进行自定义css样式..

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.

推荐答案

有多种实现方法.

这里是一种选择:

*.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;    
}

这篇关于Angular2，如何获取当前的活动组件选择器以将其全局用作css样式的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！