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

问题描述

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

<路由器插座></路由器插座>

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

有人知道怎么做吗??提前感谢您的时间和支持.

解决方案

有不同的方法来实现它.

这是一种选择:

*.html

<router-outlet (activate)="onActivated($event)"></router-outlet>

*.ts

activeSelector: string;构造函数(私有解析器:ComponentFactoryResolver){}onActivated(组件){this.activeSelector =this.resolver.resolveComponentFactory(component.constructor).selector;}

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.

解决方案

There are different ways to achieve it.

Here is one 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;    
}

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