将类应用于Angular中的每个路由组件

Question

是否有任何方法将类应用于Angular中的每个路由组件。一种方法是使用host属性为每个组件像

@Component({ 
    moduleId: module.id, 
    selector: 'one', 
    host :{class :'my-class'} 
    templateUrl: 'one.html', 
}) 

，但我不想写这篇文章的每一个组件。

Answer 1

你真的需要添加类或只是样式所有路由组件？您可以添加此样式的所有路由组件：

router-outlet + * { 
    //your styles 
} 

说明：

角插入组件旁边<router-outlet>标签，所以呈现的HTML的样子：

<router-outlet></router-outlet> 
<some-component></some-component> 

router-outlet + *是CSS选择器为<router-outlet>的任何下一个兄弟

Answer 2

如果您正在使用<router-outlet>，只需在您的插座上添加一个div，并将div的类别设置为"my-class"。

<div class="my-class">   
    <router-outlet></router-outlet> 
</div>