在具有路径参数的父级中从一个懒加载组件导航到另一个兄弟组件时,您可以按照以下步骤解决问题:
// app-routing.module.ts
const routes: Routes = [
{ path: 'parent/:id', loadChildren: () => import('./parent.module').then(m => m.ParentModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
// parent.module.ts
const routes: Routes = [
{ path: '', component: ParentComponent, children: [
{ path: 'child1', component: Child1Component },
{ path: 'child2', component: Child2Component }
]}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ParentRoutingModule { }
Child 1
Child 2
// child1.component.ts
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.parent.params.subscribe(params => {
const id = params['id'];
// 使用id进行其他操作
});
}
这样,您就可以在具有路径参数的父级中从一个懒加载组件导航到另一个兄弟组件,并且可以在兄弟组件中获取父级组件传递的路径参数。