Angular 2可选路径参数

Angular 2路线中是否可以有一个可选的路线参数？我在RouteConfig中尝试了Angular 1.x语法，但收到以下错误：

“原始例外：路径“ / user /：id？”包含“？”，这是路由配置中不允许的。”

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

您可以使用和不使用参数来定义多个路由：

@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

{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'
}])

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。

然而，对于非参数路由路径products必须不能有斜线，否则角度将错误地把它当作一个参数路径。因此，就我而言，我对产品使用尾随的斜线，但它不起作用。

请勿这样做：

...
{path: 'products/', component: ProductsComponent},
{path: 'products/:id', component: ProductsComponent},
...

rerezz的答案很不错，但是有一个严重的缺陷。它导致User组件重新运行ngOnInit方法。

从非参数路径切换到参数路径时，当您在其中做一些繁重的工作并且不希望重新运行时可能会出现问题。尽管这两个路由是要模仿一个可选的url参数，但不要成为2条单独的路由。

我建议您解决以下问题：

const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: ':id', component: UserWithParam, name: 'Usernew' }
    ]
  }
];

然后，您可以将负责处理参数的逻辑移至UserWithParam组件，并将基本逻辑留在User组件中。User::ngOnInit从/ user导航到/ user / 123时，您所做的任何操作都不会再次运行。

不要忘了把<router-outlet></router-outlet>中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);
 }

然后在路由配置中使用匹配器：

const routes: Routes = [
    {
        matcher: userPageMatcher,
        component: User,
    }
];

使用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参数知道下一条路由。

遇到此问题的另一个实例，并在此寻求解决方案。我的问题是我在做孩子，并且延迟加载组件以及优化某些东西。简而言之，如果您懒于加载父模块。最主要的是我在路由中使用了“ /：id”，并且抱怨“ /”是其中的一部分。这里不是确切的问题，但适用。

来自父级的应用路由

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pathOne',
        loadChildren: 'app/views/$MODULE_PATH.module#PathOneModule'
      },
      {
        path: 'pathTwo',
        loadChildren: 'app/views/$MODULE_PATH.module#PathTwoModule'
      },
...

子路由懒加载

...
const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: '',
        component: OverviewComponent
      },
      {
        path: ':id',
        component: DetailedComponent
      },
    ]
  }
];
...

我无法评论，但参考：Angular 2可选route参数

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。

面对类似的延迟加载问题，我这样做：

const routes: Routes = [
  {
    path: 'users',
    redirectTo: 'users/',
    pathMatch: 'full'
  },
  {
    path: 'users',
    loadChildren: './users/users.module#UserssModule',
    runGuardsAndResolvers: 'always'
  },
[...]

然后在组件中：

  ngOnInit() {
    this.activatedRoute.paramMap.pipe(
      switchMap(
        (params: ParamMap) => {
          let id: string = params.get('id');
          if (id == "") {
            return of(undefined);
          }
          return this.usersService.getUser(Number(params.get('id')));
        }
      )
    ).subscribe(user => this.selectedUser = user);
  }

这条路：

• 没有的路由/将重定向到使用的路由。由于的原因pathMatch: 'full'，仅此类特定的完整路由被重定向。

• 然后，users/:id被接收。如果实际路线为users/，id则为""，请检查ngOnInit并采取相应措施；否则，id是ID并继续。

• 其余部分所作用的对象是否selectedUser是未定义的（* ngIf和类似的东西）。