angular - 基于可变段的角度路径子项
问题描述
我有一个指向同一位置的 url 模式,但它以不同的数据结尾。
例子:
请记住,“detail”和“object”都是动态的,例如:detail1-category、detail2-category、detail3-category、object1、object2、objectt3。
网址1 =/url/detail-category
网址2 =/url/object
我需要根据 URL 是否以“-category”结尾来加载Children,我正在使用匹配器,但我丢失了“路径”变量,因为不能同时使用匹配器和路径。
原来的:
{ path: 'url/:id',
loadChildren: './modules/child.module#ChildModule'
},
更新:
{ matcher: categoriesMatcher,
loadChildren: './modules/child.module#ChildModule'
},
export function categoriesMatcher(url: UrlSegment[]) {
return url.length === 1 && url[0].path.endsWith('-category') ? ({consumed: url, path: url}) : null;
}
// 以上部分取自这里,它可以工作,但是我们丢失了决定组件行为的数据。Angular 2个具有相同路线的不同组件
解决方案
匹配器可以提供参数作为匹配逻辑的一部分。返回值应包含具有posParam
每个路由参数值的属性。
例如:
export function MyAwesomeMatcher ( url: UrlSegment[] ): UrlMatchResult {
if (url.length === 0) {
return null;
}
const reg = /^(awesome-path)$/;
const param = url[ 0 ].toString();
if (param.match( reg )) {
// myValue: "awesome-path"
return ({ consumed: url, posParams: { myValue: url[ 0 ] } });
}
return null;
}
// define application routes.
const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ matcher: MyAwesomeMatcher, component: MyAwesomeComponent }
...
];
上述示例的代码从此处复制:
https://gist.github.com/anein/fba647b4206695d109c30e1fc0d2e8ee
推荐阅读
- mongodb - Heroku mongodb 定时查询
- html - 错误类型错误:无法读取未定义角度的属性“名称”
- amazon-web-services - 通过 AWS API Gateway、Lambda 从 Angular 8 上传图像到 S3
- python - 为什么python ide在代码中没有错误警告时显示空白窗口?
- sorting - 从列选项卡设置排序时如何删除排序
- vba - 按下 GetAsyncKeyState 时如何检查 VBA 应用程序是否处于焦点
- java - OpenCV 的 drawContours 函数使 Android 应用程序崩溃
- c# - 如何使2个字符被视为一个字母?
- javascript - describe() 中的 it() 调用是否同步执行?
- slurm - 如何查看我当前的交互式 SLURM 会话还剩多少时间?