在Angular 2的路由中可以有一个可选的路由参数吗?我尝试了Angular 1。但是在routecconfig中收到如下错误:
“ORIGINAL EXCEPTION: Path /user/:id?”包含“?”,这在路由配置中是不允许的。
@RouteConfig([
{
path: '/user/:id?',
component: User,
as: 'User'
}])
在Angular 2的路由中可以有一个可选的路由参数吗?我尝试了Angular 1。但是在routecconfig中收到如下错误:
“ORIGINAL EXCEPTION: Path /user/:id?”包含“?”,这在路由配置中是不允许的。
@RouteConfig([
{
path: '/user/:id?',
component: User,
as: 'User'
}])
当前回答
Angular 4 -解决可选参数排序的方案:
这样做:
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'products', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent}
]
注意,products和products/:id路由的命名完全相同。对于没有参数的路由,Angular 4会正确地遵循products,如果有参数,它会遵循products/:id。
然而,非参数路由产品的路径不能有后面的斜杠,否则angular会错误地将其视为参数路径。在我的例子中,我用后面的斜杠表示产品,但它不起作用。
不要这样做:
...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...
其他回答
遇到了这个问题的另一个例子,为了寻找解决方案,我来到了这里。我的问题是,我正在做的孩子,和惰性加载组件以及优化事情一点。简而言之,如果你懒于加载父模块。主要的事情是我在路线中使用'/:id',它抱怨'/'是它的一部分。这不是真正的问题,但它适用。
从父应用程序路由
...
const routes: Routes = [
{
path: '',
children: [
{
path: 'pathOne',
loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
},
{
path: 'pathTwo',
loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
},
...
子路由惰性加载
...
const routes: Routes = [
{
path: '',
children: [
{
path: '',
component: OverviewComponent
},
{
path: ':id',
component: DetailedComponent
},
]
}
];
...
{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}
这样,在添加参数时就不会重新呈现组件。
Angular 4 -解决可选参数排序的方案:
这样做:
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'products', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent}
]
注意,products和products/:id路由的命名完全相同。对于没有参数的路由,Angular 4会正确地遵循products,如果有参数,它会遵循products/:id。
然而,非参数路由产品的路径不能有后面的斜杠,否则angular会错误地将其视为参数路径。在我的例子中,我用后面的斜杠表示产品,但它不起作用。
不要这样做:
...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...
这里建议的答案,包括来自rerezz的接受答案,它建议添加多个路由条目。
然而,当路由表项之间发生变化时,即在带参数的路由表项和不带参数的路由表项之间,组件将被重新创建。
如果你想避免这种情况,你可以创建自己的路由匹配器来匹配这两个路由:
export function userPageMatcher(segments: UrlSegment[]): UrlMatchResult {
if (segments.length > 0 && segments[0].path === 'user') {
if (segments.length === 1) {
return {
consumed: segments,
posParams: {},
};
}
if (segments.length === 2) {
return {
consumed: segments,
posParams: { id: segments[1] },
};
}
return <UrlMatchResult>(null as any);
}
return <UrlMatchResult>(null as any);
}
然后在路由配置中使用matcher:
const routes: Routes = [
{
matcher: userPageMatcher,
component: User,
}
];
使用angular4,我们只需要在层次中组织路由
const appRoutes: Routes = [
{
path: '',
component: MainPageComponent
},
{
path: 'car/details',
component: CarDetailsComponent
},
{
path: 'car/details/platforms-products',
component: CarProductsComponent
},
{
path: 'car/details/:id',
component: CadDetailsComponent
},
{
path: 'car/details/:id/platforms-products',
component: CarProductsComponent
}
];
这对我很有用。这样路由器就可以根据选项id参数知道下一个路由是什么。