在Angular中,懒加载是一种加载模块的方式,它允许将模块按需加载到应用程序中,而不是在应用程序启动时加载所有模块。父路由参数是指在父级路由中传递的参数。
以下是一种解决方法,可以实现Angular的懒加载与父路由参数的组合:
parent
的父级路由,其中包含一个名为parentId
的参数。// app-routing.module.ts
const routes: Routes = [
{
path: 'parent/:parentId',
loadChildren: () => import('./child/child.module').then(m => m.ChildModule)
},
// ...
];
ActivatedRoute
来访问父路由的参数。// child-routing.module.ts
const routes: Routes = [
{
path: '',
component: ChildComponent
},
// ...
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ChildRoutingModule { }
ActivatedRoute
访问父路由参数。// child.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
parentId: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.parentId = params.get('parentId');
});
}
}
Parent ID: {{ parentId }}
以上就是使用Angular实现懒加载与父路由参数的解决方法。在这个例子中,当访问/parent/123
时,将会加载ChildModule
,并在子组件中显示父路由参数123
。