大佬教程收集整理的这篇文章主要介绍了带有延迟加载模块的Angular Router Breadcrumbs,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
Root segment cAnnot have matrix parameters
我已经研究过这个问题,但未能找到令人满意的信息/解决方案.
我创建了一个plunk,其中包含了我要完成的工作,以便从此页面上的大量代码中进行保存:
https://plnkr.co/edit/505x2r
如何继续使用路由器创建的动态面包屑,但也使用延迟加载的路由.
import {NgModulE} from '@angular/core'; import {RouterModulE} from '@angular/router'; import { RootComponent } from 'src/root/root.component'; import { IndexComponent } from 'src/index/index.component'; import { SignupComponent } from 'src/signup/signup.component'; import { SigninComponent } from 'src/signin/signin.component'; @NgModule({ imports: [ RouterModule.forChild([ { path: '',component: RootComponent,children: [ { path: 'signin',loadChildren: 'src/signin/signin.module#SigninModule' },{ path: 'signup',component: SignupComponent,data: { breadcrumb: 'Sign Up' } },{ path: '',component: IndexComponent } ] } ]) ],exports: [ RouterModule ] }) export class RootRoutIngModule {}
最后的情况是:https://plnkr.co/edit/iedQjH?p=preview
以下是我遇到的压缩问题:
首先,我有懒惰的加载路线,我在路线上以面包屑的形式获得数据.当运行getBreadcrumbs时,面包屑标签将显示两次.我通过添加以下行解决了这个问题:
if ( child.snapshot.url.map(segment => segment.path).length === 0 ) { return this.getBreadcrumbs(child,url,breadcrumbs); }
其次,我的路由只是一个参数输入,但我需要在痕迹路径上列出它.通过映射child.snapshot.url并将段指定给标签来解决此问题.
const routeArray = child.snapshot.url.map(segment => segment.path); for ( let i = 0; i < routeArray.length; i++ ) { label = routeArraY[i]; }
第三,我需要显示参数以及下一个路径的标签,无论是立即加载还是通过模块延迟加载.我还遇到了以下需要拆分的路径和适当分配的标签:
{ path: ':id/products',loadChildren: 'src/products/products.module#ProductsModule',data: { breadcrumb: 'Products' } }
和
{ path: 'orders/:id',component: OrderComponent,data: { breadcrumb: 'orders' } },
两者的解决方案是:
for ( let i = 0; i < routeArray.length; i++ ) { if ( Object.keys(child.snapshot.params).length > 0 ) { if ( this.isParam(child.snapshot.params,routeArraY[i]) ) { label = routeArraY[i]; } else { label = child.snapshot.data[ROUTE_DATA_BREADCRUMB]; } } else { label = child.snapshot.data[ROUTE_DATA_BREADCRUMB]; } const routeURL = routeArraY[i]; url += `/${routeURL}`; const breadcrumb: BreadCrumb = { label: label,params: child.snapshot.params,url: url }; breadcrumbs.push(breadcrumb); } private isParam(params: Params,segment: String) { for ( const key of Object.keys(params)) { const value = params[key]; if ( value === segment ) { return true; } } return false; }
有了所有好东西,有一个问题:你必须有一个适合每个参数的路线.
例如,如果您有网址:#/ quotes / 123456 / products / 123456 / Generic / Tissue,则需要以下路线:
{ path: ':id',component: ProductComponent,data: 'data' },{ path: ':id/:make',{ path: ':id/:make/:model',data: 'data' }
最终你会得到一个可点击的面包屑,如下所示:
主页/行情/ 123456 /产品/ 123456 / Generic / Tissue
最后,我能够处理立即加载的路由和延迟加载的路由,这是我的最终目标.我确信有些情况我没有考虑过,但我觉得它非常可靠.
无论如何,我鼓励人们把这里的东西拿走并运行它.用任何更新给我拍一张便条,这样我就能做到这一点!谢谢!
以上是大佬教程为你收集整理的带有延迟加载模块的Angular Router Breadcrumbs全部内容,希望文章能够帮你解决带有延迟加载模块的Angular Router Breadcrumbs所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。