如何解决我们如何在Angular的延迟加载模块中获取路线参数
我有如下路由,其中将id作为参数传递。因此,我必须在模块内部使用相同的ID来基于路由参数加载隔离的翻译文件。
const routes: Routes = [
{
path: 'flight/:id',loadChildren: () => import('./layout/base/base.module').then(m => m.BaseModule)
},];
现在在BaseModule文件中,我必须使用:id数据来加载一些数据。 有什么办法可以读取或获取BaseModule文件中的路由数据。
解决方法
您可以使用此配置从父路由访问参数:
RouterModule.forRoot(appRoutes,{
paramsInheritanceStrategy: 'always'
})
现在,您可以在base.module中访问:id。但是,使用这种方法时,最好更具体地命名您的参数。
另一种方法是提高路由器状态:
export function extractRoute(route: ActivatedRoute,component: any): ActivatedRoute {
if (route && route.component !== component) {
return extractRoute(route.parent,component);
}
return route;
}
您可以将此功能与保存与路由器配置相对应的路由器出口的组件一起使用。例如
AppComponent->RouterOutlet->
const routes: Routes = [
{
path: 'flight/:id',loadChildren: () => import('./layout/base/base.module').then(m => m.BaseModule)
},];
您可以通过以下方式访问id属性:
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
const id = extractRoute(activatedRoute,AppComponent).snapshot.params.id;
}
,
在您的BaseModule
中,您可以订阅路由器事件,然后检查ActivatedRoute
快照以获取您的ID,如下所示:
export class BaseModule {
constructor( active: ActivatedRoute,router: Router) {
router.events
.pipe(
filter(e => e instanceof NavigationEnd),filter((ne: NavigationEnd) => ne.url.includes("flights/"))
)
.subscribe(e => {
console.log(active.firstChild.snapshot.params.id);
});
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。