如何在Angular中的第一个请求中获取查询参数？

我正面临着一个问题。我的应用程序将被另一个web应用程序调用，该应用程序将发送一些我需要在应用程序中访问的查询参数，并使用这些参数进行一些处理。我的路线看起来像

const routes:routes=[
{
路径：“foo”，
组件：FooComponent
},
{
路径：'bar'，
组件：BarComponent
},
{
路径：“错误”，
组件：ErrorComponent
},
{
路径：“”，
重定向到：'/foo'，
路径匹配：“已满”
},
{
路径：'**'，
重定向到：'/error'，
路径匹配：“已满”
}
];

---

当我用

http://localhost:4200/?id=1234

，我被重定向到

http://localhost:4200/foo

不带查询参数。我试着创建一个守卫来访问params，但没有成功。对于其余的路由，我知道如何访问参数，但不知道如何在第一次点击URL时获取参数。这看起来像一个正常的用例，所以想知道是否有人可以指导我。提前感谢。

一个选项是将FooComponent设置为显示为基本URL

要执行此操作，请尝试：

const routes:routes=[
{
路径：“”，
组件：FooComponent
},
//其他。。。
{
路径：“foo”，
重定向到：“”，
路径匹配：“已满”
},
];

并在foo组件中获取查询字符串参数

ngOnInt（）{
this.route.queryParams.subscribe（queryParams=>{
const id=queryParams['id']；
});
}

简而言之：

但是，您可以指定自己的

matcher

重定向到特定URL。 这确实允许您访问查询参数

const appRoutes: Routes = [
  {
    matcher: customMatcher,
    redirectTo: '/foo/:id',
  }
];

matcher可以提取id。其实质是需要提取id并将其放入posParams字段。重定向路径随后将作为命名查询参数接收它

export function customMatcher(segments: UrlSegment[]): UrlMatchResult {
    if (segments?.length === 1) {

       return {
         consumed: segments,
         posParams: { id: segments[0] },  
       };
       return null;
    }
 }

上述代码不工作/未测试。但是我认为如果你设置一个断点，你将能够准确地看到应该如何提取id

---

我希望这能有所帮助。

谢谢基兰。这不起作用。参数显示为空。谢谢bvdb。我会试试你的方法。这看起来像是从其他地方重定向的非常正常的业务场景。不知道为什么不支持它。@Sandepkumar为没有测试它而提前道歉。“我是从我以前的一个项目中获取的。@Sandepkumar显然对斜杠在基本URL中的位置是否正确存在很大的困惑。e、 我注意到，如果你做一个ng构建--prod--base/test/或ng构建--prod--base/test，这甚至是不同的，更糟糕的是，如果你使用一个electron应用程序，这是不同的。因此，我个人对electron使用了不同的index.html。因此，基本路径确实很复杂。：-）没问题，伙计。我没有任何其他线索，所以会尝试所有的选择。谢谢。@Sandepkumar前面的代码示例太让人困惑了。所以，我用更有效、更短的东西代替了它；