Angular 2+可选参数（查询）

Question

我的应用程序将使用url从外部访问，因为我需要在某些实体之间进行识别，我需要提供id参数。该参数也可以不存在。

我的问题是我有使用查询参数的请求。我看到很多解决方案，当用户与某个元素进行交互时，他会使用navigationExtras重定向可选参数。

我试图离开路径：'登录'并只添加查询参数，但它给了我

  

    

错误：无法匹配任何路线。网址细分：'login％3Fid％3D1'

  

矩阵参数也是如此，但登录和 id 之间的字符串不同。

我可以使用它作为解决方案，但它会让我复制我的所有路由，并且它与查询参数的请求不匹配。

{
  path: 'login',
  redirectTo: 'login/',
},
{
  path: 'login/:id',
  component: LoginComponent,
},

有什么建议吗？

Answer 1

您在答案中提供的是路线参数。 login/:id。当您尝试访问:id值时，您可以从activatedRoute.snapshot.params['id']获取该值，它将匹配任何路线：login/123，login/234，login/someRandomString。

另一方面，queryParams作为queryString附加到网址的末尾。 login?query1=something&query2=somethingElse。此处，query1和query2称为查询参数。

追加queryParams：

this.router.navigate(['/login], {queryParams: { query1: 'something', query2: somethingElse }); 或

<a [routerLink]="['/login']" [queryParams]="{query1: something, query2: somethingElse}">Router Link to Login</a>

Answer 2

您可以使用子组件执行此操作，具有重定向到登录的根组件以及具有ID的同级组件，该ID重定向到具有ID的登录组件

{ path: 'login', children: [ { path: '', redirectTo: 'login/', pathMatch: 'full' }, { path: ':id', component: LoginComponent, } ]