有没有什么方法可以将类应用到Angular中的每个路由组件？一种方法是为每个组件使用host属性，如
host
@Component({ moduleId: module.id, selector: 'one', host :{class :'my-class'} templateUrl: 'one.html', })
但我不想为每个组件都写这个。
niwlg2el1#
如果您在应用程序中使用多个router-outlet，请向router-outlet添加类，并应用@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>
然后引用该类而不是router-outlet：
.routed-module-component + * { // add style }
gmxoilav2#
您真的需要添加类还是只设置所有布线元件的样式？您可以添加此命令来设置所有布线元件的样式：
router-outlet + * { //your styles }
对于Angular 6+使用：
router-outlet + ::ng-deep * { //your styles }
说明：Angular在<router-outlet>标签旁边插入组件，因此呈现的html看起来如下所示：
<router-outlet>
<router-outlet></router-outlet> <some-component></some-component>
router-outlet + *是<router-outlet>的任何下一个同级的css选择器
router-outlet + *
ifmq2ha23#
如果使用**<router-outlet>**，只需在插座周围添加一个div，并将div的类设置为"my-class"。
"my-class"
<div class="my-class"> <router-outlet></router-outlet> </div>
3条答案
按热度按时间niwlg2el1#
如果您在应用程序中使用多个router-outlet，请向router-outlet添加类，并应用@Ludevik建议的相同代码：
然后引用该类而不是router-outlet：
gmxoilav2#
您真的需要添加类还是只设置所有布线元件的样式？您可以添加此命令来设置所有布线元件的样式：
对于Angular 6+使用：
说明：
Angular在
<router-outlet>标签旁边插入组件，因此呈现的html看起来如下所示：router-outlet + *是<router-outlet>的任何下一个同级的css选择器ifmq2ha23#
如果使用**
<router-outlet>**，只需在插座周围添加一个div，并将div的类设置为"my-class"。