Angular中,子路由默认不会继承根路由的样式。如果需要让子子路由继承父级路由的样式,可以在设置子路由时使用pathMatch: 'full'
属性,示例如下:
const routes: Routes = [
{
path: 'parent',
component: ParentComponent,
children: [
{
path: 'child',
component: ChildComponent,
pathMatch: 'full' // 设置pathMatch属性为full
}
]
}
];
这样设置之后,子子路由将会继承父级路由的样式。
另外一种方法是使用::ng-deep
伪类选择器,示例如下:
.parent-class ::ng-deep .child-class {
/* 根据需要设置样式 */
}
使用::ng-deep
可以让子子组件继承父级组件的样式。但是需要注意,在Angular 9+版本中,::ng-deep
已经被标记为过时。建议使用/deep/
伪类选择器替代::ng-deep
。
示例如下:
.parent-class /deep/ .child-class {
/* 根据需要设置样式 */
}