基于查询参数的Angular 2路由

Question

在Angular 2中是否可以根据查询参数定义路由？我想要有以下行为:

如果用户输入了http:<server-path>/search我想要路由到StartPage组件的URL .

如果用户输入http:<server-path>/search?query=sometext我想要路由到ResultList组件的URL .

我知道可以使用路径参数进行路由,但这不是我喜欢做的.我想尽可能使用查询参数.我知道如何使用查询参数触发角度导航,但我不知道如何配置路由.

Answer 1

因此,您无法在其中定义path带有查询字符串的a,但您可以matcher改为使用路由并确定何时路由到该ResultList组件.您可以在默认路由定义之上定义它,search以便在匹配失败时将默认为没有查询字符串的搜索路由.

{
    component: ResultListComponent,
    matcher: (url: UrlSegment[]) => {
      console.log(url);
      return url.length === 1 && url[0].path.indexOf('search?query=') > -1 ? ({consumed: url}) : null;
    }
},
{
    path: 'search',
    component: SearchComponent,
}

演示