在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'
}])
当前回答
Rerezz的回答很不错,但它有一个严重的缺陷。它会导致User组件重新运行ngOnInit方法。
当你在那里做一些繁重的工作时它可能会有问题当你从非参数路线切换到参数路线时,你不希望它重新运行。虽然这两个路由是为了模仿一个可选的url参数,而不是成为两个独立的路由。
下面是我解决这个问题的建议:
const routes = [
{
path: '/user',
component: User,
children: [
{ path: ':id', component: UserWithParam, name: 'Usernew' }
]
}
];
然后,您可以将负责处理参数的逻辑移动到UserWithParam组件,并将基本逻辑留在User组件中。无论你在User::ngOnInit中做什么,当你从/ User导航到/ User /123时,都不会再次运行。
不要忘记在User的模板中放入<router-outlet></router-outlet>。
其他回答
使用这个匹配器函数,您可以在不重新渲染组件的情况下获得理想的行为。当url。长度等于0,没有可选参数,url。长度等于1,有1个可选参数。Id -可选参数名称。
const routes: Routes = [
{
matcher: (segments) => {
if (segments.length <= 1) {
return {
consumed: segments,
posParams: {
id: new UrlSegment(segments[0]?.path || '', {}),
},
};
}
return null;
},
pathMatch: 'prefix',
component: UserComponent,
}]
在Angular 8中,你可以在不改变路由器配置的情况下简单地添加参数。
可选参数
在yourModule.routing.module.ts
const routes: Routes = [
{ path: 'somePath/:RequiredParam', component: Yourcomponent }
];
在模板中:
<div [RouterLink] = ['somePath', requiredParamValue, {optionalParam: value}]></div>
我不能评论,但参考: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
当信息为可选时,建议使用查询参数。
路由参数还是查询参数? 没有硬性规定。一般来说, 时优先使用路由参数 该值是必选项。 用于区分不同的路由路径。 时首选查询参数 可选参数。 该值为复杂和/或多变量。
从https://angular.io/guide/router optional-route-parameters
您只需要从路由路径中取出参数。
@RouteConfig([
{
path: '/user/',
component: User,
as: 'User'
}])