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

Question

有没有办法将一个类应用到 Angular 中的每个路由组件。一种方法是为每个组件使用 host 属性，例如

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

但我不想为每个组件都写这个。

Answer 1

您真的需要添加类还是只为所有路由组件设置样式？您可以添加它来设置所有路由组件的样式:

router-outlet + * {
    //your styles
}

对于 angular 6+ 使用:

router-outlet + ::ng-deep * {
    //your styles
}

解释:

Angular 在 <router-outlet> 旁边插入组件标记，因此呈现的 html 如下所示:

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

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