将类应用于 Angular 中的每个布线元件

Question

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

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

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

Answer 1

您真的需要添加类还是只是样式化所有路由组件？您可以添加此项以设置所有布线组件的样式：

router-outlet + * {
//your styles
}

对于角度 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 并将div 的类设置为"my-class"。

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

Answer 3

如果在应用程序中使用多个路由器出口，请将类添加到路由器出口，并应用与建议@Ludevik相同的代码：

<div>
<router-outlet class="routed-module-component"></router-outlet>
<app-router-component-instance>
<router-outlet></router-outlet> <!-- Will not be affected -->
<app-router-component-instance>
</div>

然后引用该类而不是路由器出口：

.routed-module-component  + * {
// add style
}