使用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参数知道下一个路由是什么。

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

在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。

主细节视图也有同样的问题。主视图可以在没有: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。