Angular 4.3.x 路由查询参数失败

Question

在两天的大部分时间里，我一直在尝试让查询参数正常工作，但没有成功。我有一条非常简单的路线 def:

{ path: 'search', component: SearchComponent, canActivate: [ AuthGuard ] }

并且我正在尝试能够使用在搜索控制器中查看的查询参数直接进入搜索页面，如果它们存在，则根据查询参数正确设置搜索：

http://localhost:5001/search?q=something&tt=234234234234

我已经正确订阅了 Activated 路由，我什至看到查询参数在控制台中被正确解析：

Object {q: "something", tt: "234234234234"}

但在我收到有关不匹配任何路线的错误消息后立即：

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'search%3Fq%3Dsomething%26tt%3D234234234234'
Error: Cannot match any routes. URL Segment: 'search%3Fq%3Dsomething%26tt%3D234234234234'

我确实得到了，肯定没有这样的路线，为什么不从主要路线段中提取查询参数？我正在使用加载其他模块的主应用程序模块。在我的搜索模块中，我包含了路由器模块，例如：

RouterModule.forChild(searchRoutes)

我的主路由器模块有一个空路由，路由器模块看起来像：

{ path: '', component: AppComponent, pathMatch: 'full' }

RouterModule.forRoot(appRoutes)

两个 RouterModule 都在导入结束时加载。感谢您的任何见解！

Answer 1

Which I do get, there certainly isn't a route like that, why aren't the query params being extracted from the main route segment?

这是因为您正在使用 pathMatch: 'full'。只需将其删除并查看它是否正常工作。

Answer 2

查询参数应设置为 routerLink 或 .navigate 方法的一部分，如下所示：

Angular 4.3.x 路由查询参数失败

Angular 4.3.x Routing Query Params failing

angular-routing

angular2-routing

angular