如何将Angular路由参数设置为可选？

你提到的:id?这种可选参数写法，在早期Angular的@RouteConfig路由语法里确实不支持，但可以通过以下几种方式实现类似效果：

1. 保留双路由定义（旧版本最规范方案） #

虽然是两条路由，但可以通过设置useAsDefault优化默认匹配，同时给路由设置不同名称避免冲突：

@RouteConfig([
  { path: '/user', component: User, name: 'User', useAsDefault: true },
  { path: '/user/:id', component: User, name: 'UserWithId' }
]);

在User组件内，通过ActivatedRoute获取参数，判断id是否存在即可：

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  const userId = this.route.snapshot.params['id'];
  if (userId) {
    // 处理带id的逻辑
  } else {
    // 处理无id的逻辑
  }
}

2. 升级到新路由系统（推荐） #

如果项目允许升级到Angular正式版的RouterModule路由系统，原生支持可选参数语法，完全符合你的需求：

import { RouterModule, Routes } from '@angular/router';

const appRoutes: Routes = [
  { path: '/user/:id?', component: User }
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

组件内同样通过ActivatedRoute获取参数，逻辑和上面一致。

3. 通配符路由（不推荐） #

可以用通配符匹配所有/user开头的路径，然后自己解析URL，但这种方式不够严谨，容易误匹配其他路径：

@RouteConfig([
  { path: '/user/**', component: User, name: 'User' }
]);

组件内解析URL：

ngOnInit() {
  const urlSegments = this.route.snapshot.url;
  if (urlSegments.length > 1) {
    const userId = urlSegments[1].path;
    // 处理带id的逻辑
  }
}

内容的提问来源于stack exchange，提问作者Jeanluca Scaljeri