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

Question

有什么方法可以将 class 应用于 Angular 中的每个路由组件。一种方法是对每个组件使用 host 属性，例如

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

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

Answer 1

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

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 选择器

Answer 2

如果您使用 <router-outlet>，只需在插座周围添加一个 div 并将 class 设置为 [=18] =] 到 "my-class".

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

Apply class to every routed component in Angular