Demo

Question

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

如果用户输入了网址http:<server-path>/search，我想要转到StartPage组件。

如果用户输入了网址http:<server-path>/search?query=sometext，我想要路由到ResultList组件。

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

Answer 1

因此，您无法使用查询字符串定义path，但您可以使用路由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,
}

Demo

Answer 2

在下面的代码中，我将展示如何跨任何路径传递查询字符串参数。

假设我们想要以下网址：

http://localhost:4200/myUrl?QueryParamEx=2258

在构造函数中注入ROUTER依赖项

constructor(...private router: Router..){...}

导航功能将允许我们导航到前面的网址

goMyUrl() {
  this.router.navigate(['/myUrl'], { queryParams: { QueryParamEx: '2258' } });
}

Answer 3

你也可以这样设置：

<强>路线：

{ path: 'server-path/:id', component: ResultListComponent },
{ path: 'server-path', component: serverPathComponent },

<强> ResultListComponent

queryParam: string;
    ngOnInit() {     
           this.route.params.forEach((params: Params) => {
               this.queryParam = params['id'];

           });
       }

您可以使用该queryParam调用您需要执行的任何功能或任何操作。

有关查询参数的更多信息，请参阅Routing & Navigation guide

基于查询参数的Angular 2路由

3 个答案:

Demo