Angular对某些路由移除了base-href。
创始人
2024-10-24 15:31:41
0

在使用 Angular 路由时需要注意,如果在根模块中设置了 base-href,在使用 loadChildren 懒加载模块时会移除这个 base-href,导致路由无法正确匹配。因此需要在懒加载模块中重新设置 base-href。

示例代码:

// app.module.ts @NgModule({ imports: [ CommonModule, RouterModule.forRoot(routes, { initialNavigation: 'enabled', relativeLinkResolution: 'legacy', }), ], }) export class AppModule {}

// lazy.module.ts @NgModule({ imports: [ CommonModule, RouterModule.forChild([ { path: '', component: LazyComponent, children: [ { path: 'child', component: LazyChildComponent, data: { baseHref: '/lazy', }, }, ], }, ]), ], }) export class LazyModule { constructor( private router: Router, private activatedRoute: ActivatedRoute ) { this.router.events .pipe(filter((e) => e instanceof NavigationEnd)) .subscribe(() => { const { root } = this.activatedRoute; const { baseHref } = root.firstChild.snapshot.data; if (baseHref) { const base = document.createElement('base'); base.href = baseHref; const head = document.getElementsByTagName('head')[0]; head.insertBefore(base, head.firstChild); } }); } }

上述代码中,我们在路由配置中加入了一个 data 属性,用来存储每个子路由需要设置的 base-href。在 LazyModule 的 constructor 中通过订阅路由事件,在路由变化时手动插入新增的 base 标签来设置 base-href。这个方法可以避免 Angular 移除 base-href 导致的路由匹配问题。

相关内容

热门资讯

揭秘攻略!hhpoker有辅助... 揭秘攻略!hhpoker有辅助吗,德普辅助软件,攻略教程(有挂方法);玩家必备必赢加哟《136704...
发现一款!hhpoker德州挂... 这是一款非常优秀的hhpoker德州挂真的有吗 ia辅助检测软件,能够让你了解到hhpoker德州挂...
攻略讲解!wepoker正确养... 攻略讲解!wepoker正确养号方法,黑侠破解wepoker,安装教程(有挂神器);人气非常高,ai...
最新技巧!wepoker模拟器... 最新技巧!wepoker模拟器哪个,约局吧如何查看是否有挂,透明教程(有挂攻略);科技安装教程;13...
今日公布!hhpoker是正品... 今日公布!hhpoker是正品吗,红龙poker辅助工具,教你攻略(有挂技巧)科技教程也叫必备教程,...
推荐攻略!红龙poker辅助平... 推荐攻略!红龙poker辅助平台,wepoker怎么设置透视,解密教程(有挂神器)科技教程也叫必备教...
玩家必备攻略!aapoker ... 玩家必备攻略!aapoker ai插件,红龙poker辅助工具,切实教程(有挂技巧)科技教程也叫必备...
玩家必看教程!werplan有... 自定义wepoker俱乐部辅助系统规律,只需要输入自己想要的开挂功能,一键便可以生成出微扑克专用辅助...
重大通报!wepoker透视有... 重大通报!wepoker透视有吗,wepoker透视脚本网页,必赢教程(有挂教程)1、玩家可以在we...
我来分享!impoker辅助,... 我来分享!impoker辅助,uupoker透视,实用技巧(有挂透视);原来确实真的有挂(需添加指定...