在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 2的可选路由参数
Angular 6的更新:
import {map} from "rxjs/operators"
constructor(route: ActivatedRoute) {
let paramId = route.params.pipe(map(p => p.id));
if (paramId) {
...
}
}
有关Angular6路由的更多信息,请参阅https://angular.io/api/router/ActivatedRoute。
其他回答
你可以定义多个带参数和不带参数的路由:
@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
这里建议的答案,包括来自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,
}
];
当信息为可选时,建议使用查询参数。
路由参数还是查询参数? 没有硬性规定。一般来说, 时优先使用路由参数 该值是必选项。 用于区分不同的路由路径。 时首选查询参数 可选参数。 该值为复杂和/或多变量。
从https://angular.io/guide/router optional-route-parameters
您只需要从路由路径中取出参数。
@RouteConfig([
{
path: '/user/',
component: User,
as: 'User'
}])
我不能评论,但参考:Angular 2的可选路由参数
Angular 6的更新:
import {map} from "rxjs/operators"
constructor(route: ActivatedRoute) {
let paramId = route.params.pipe(map(p => p.id));
if (paramId) {
...
}
}
有关Angular6路由的更多信息,请参阅https://angular.io/api/router/ActivatedRoute。
使用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参数知道下一个路由是什么。