Angular 2 可选路由参数

Question

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

“原始异常：路径“/user/:id?”包含“？”，这在路由配置中是不允许的。”

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

Answer 1

你可以定义多条带参数和不带参数的路由：

@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

Answer 2

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

这样在添加参数时组件不会重新渲染。

Answer 3

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

路由参数还是查询参数？

没有一成不变的规则。一般来说，

首选路由参数时

• 该值是必需的。
• 该值是区分一条路径与另一条路径所必需的。

首选查询参数时

• 该值是可选的。
• 该值是复杂的和/或多变量的。

来自https://angular.io/guide/router#optional-route-parameters

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

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

Answer 4

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 的路径必须不有斜杠，否则 Angular 会错误地将其视为参数路径。所以在我的例子中，我的产品有斜线，但它不起作用。

不要这样做：

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

Answer 5

rerezz 的答案非常好，但它有一个严重的缺陷。它会导致User 组件重新运行ngOnInit 方法。

当您在那里做一些繁重的事情并且当您从非参数路由切换到参数路由时不希望它重新运行时，这可能会出现问题。虽然这两个路由是为了模仿一个可选的 url 参数，而不是成为 2 个单独的路由。

这是我解决问题的建议：

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

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

不要忘记将<router-outlet></router-outlet> 放入User 的模板中。

Answer 6

这里的建议答案，包括来自rerezz 的accepted answer，它建议添加多个路由条目可以正常工作。

但是，当在路由条目之间更改时，将重新创建组件，即在带有参数的路由条目和不带参数的条目之间。

如果你想避免这种情况，你可以创建自己的路由匹配器来匹配两条路由：

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,
    }
];

Answer 7

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

Answer 8

在 Angular 8 中，您可以简单地添加参数而无需更改路由器配置。

Angular Doc Optional param

在你的Module.routing.module.ts中

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

在您的模板中：

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

Answer 9

遇到了这个问题的另一个实例，并在寻找解决方案时来到这里。我的问题是我在做孩子，以及延迟加载组件以优化一些东西。简而言之，如果您延迟加载父模块。主要是我在路线中使用'/：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
      },
    ]
  }
];
...

Answer 10

使用此匹配器功能，您无需重新渲染组件即可获得理想的行为。当 url.length 等于 0 时，没有可选参数，当 url.length 等于 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,
  }]

Answer 11

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

Answer 12

有三种方法可以通过路由将路由参数从一个组件发送到另一个组件。但首先将这些库导入到组件相关的 .ts 文件中并在构造函数中定义

private route: ActivatedRoute
private router: Router

第一种方式：必需的路由参数

//Route Configuration
{path: 'user/:id', component: UserDetailComponent}

//Set Hyperlink/routerLink
<a [routerLink]="['/user', user.id]"></a> 

 //Requesting Url after click on hyperlink
 http://localhost:4200/user/6

//Now you can read id value in navigated component
this.route.snapshot.paramMap.get('id');

第二种方式：可选路径参数

//Route Configuration
    {path: 'user', component: UserDetailComponent}
    
    //Set Hyperlink/routerLink
    <a [routerLink]=['/user', {name: userName, status: true}]"></a>


//Requesting Url after click on hyperlink
    http://localhost:4200/user;name:userNameValue;status:true

//Now you can read values in navigated component
    this.route.snapshot.paramMap.get('userId');
    this.route.snapshot.paramMap.get('userName');

第三种方式：可选路径参数

//Route Configuration
    {path: 'user', component: UserDetailComponent}
    
    //Set Hyperlink/routerLink
    <a [routerLink]="['/user']"  [queryParms]="{userId:'911', status:true}"></a>

    //Requesting Url after click on hyperlink
    http://localhost:4200/user?userId=911&status=true

    
    //Now you can read values in navigated component
    this.route.snapshot.paramMap.get('userId');
    this.route.snapshot.paramMap.get('userName');

参考：https://qastack.mx/programming/44864303/send-data-through-routing-paths-in-angular

Answer 13

我无法发表评论，但参考：Angular 2 optional route parameter

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。

Answer 14

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

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 等）。