在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},
...
其他回答
面对类似的延迟加载问题,我做了这样的事情:
const routes: Routes = [
{
path: 'users',
redirectTo: 'users/',
pathMatch: 'full'
},
{
path: 'users',
loadChildren: './users/users.module#UserssModule',
runGuardsAndResolvers: 'always'
},
[...]
然后在组件中:
ngOnInit() {
this.activatedRoute.paramMap.pipe(
switchMap(
(params: ParamMap) => {
let id: string = params.get('id');
if (id == "") {
return of(undefined);
}
return this.usersService.getUser(Number(params.get('id')));
}
)
).subscribe(user => this.selectedUser = user);
}
这种方式:
没有/的路由被重定向到有/的路由。由于pathMatch: 'full',只有这样特定的完整路由才会被重定向。 然后接收到users/:id。如果实际路由是users/, id是"",那么在ngOnInit中检查它并相应地执行;否则,id就是id,继续。 组件的其余部分作用于selectedUser是否未定义(*ngIf之类的)。
主细节视图也有同样的问题。主视图可以在没有:elementId参数的情况下显示,但仍然应该显示详细选择并在url中显示:elementId。
我是这样解决的:
const routes: Routes = [
{
path: '',
component: MasterDetailComponent,
children: [
{
path: ':elementId',
children: [
{
path: 'details',
component: DetailComponent
},
{
path: '',
redirectTo: 'details'
}
]
}
]
}
];
然后在MasterDetailComponent中(例如在ngOnInit方法中),你可以使用子路由获得:elementId:
const childRouteWithElementId = this.route.snapshot.children[0];
const elementIdFromUrl = childRouteWithElementId.params.elementId;
if (!!elementIdFromUrl ) {
// Do what you need to with the optional parameter
}
当然,你也可以在没有子路由的情况下做同样的事情,只在url的末尾有可选的elementId。
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},
...
你可以定义多个带参数和不带参数的路由:
@RouteConfig([
{ path: '/user/:id', component: User, name: 'User' },
{ path: '/user', component: User, name: 'Usernew' }
])
并在组件中处理可选参数:
constructor(params: RouteParams) {
var paramId = params.get("id");
if (paramId) {
...
}
}
参见相关的github问题:https://github.com/angular/angular/issues/3525
遇到了这个问题的另一个例子,为了寻找解决方案,我来到了这里。我的问题是,我正在做的孩子,和惰性加载组件以及优化事情一点。简而言之,如果你懒于加载父模块。主要的事情是我在路线中使用'/: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
},
]
}
];
...