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

【问题标题】：Apply class to every routed component in Angular将类应用于 Angular 中的每个路由组件
【发布时间】：2018-01-06 22:40:34
【问题描述】：

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

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

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

【问题讨论】：

【解决方案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 选择器

【讨论】：

这行得通，但你能解释一下这条线是什么意思吗？
我们如何添加一个类？
对于 Angular 6，我需要添加 router-outlet + ::ng-deep * { 否则，它需要 * 与添加的元素相同的 _ngcontent 相同。它是它自己的 _nhost。

【解决方案2】：

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

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

【讨论】：