使用这个匹配器函数，您可以在不重新渲染组件的情况下获得理想的行为。当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,
  }]

使用这个匹配器函数，您可以在不重新渲染组件的情况下获得理想的行为。当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,
  }]

{path: 'users', redirectTo: 'users/', pathMatch: 'full'},
{path: 'users/:userId', component: UserComponent}

这样，在添加参数时就不会重新呈现组件。

当信息为可选时，建议使用查询参数。

路由参数还是查询参数? 没有硬性规定。一般来说, 时优先使用路由参数 该值是必选项。 用于区分不同的路由路径。 时首选查询参数 可选参数。 该值为复杂和/或多变量。

从https://angular.io/guide/router optional-route-parameters

您只需要从路由路径中取出参数。

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

这里建议的答案，包括来自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,
    }
];

在Angular 8中，你可以在不改变路由器配置的情况下简单地添加参数。

可选参数

在yourModule.routing.module.ts

const routes: Routes = [
  { path: 'somePath/:RequiredParam', component: Yourcomponent }
];

在模板中:

<div [RouterLink] = ['somePath', requiredParamValue, {optionalParam: value}]></div>