Angular 2中可以根据查询参数定义路由吗？我想要有以下行为：基于查询参数的角度2路由

如果用户登录的网址为http:<server-path>/search我想要路由到StartPage组件。

如果用户登录了url http:<server-path>/search?query=sometext我想要路由到ResultList组件。

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

2017-02-17 Manuel Mauky

因此，您无法使用查询字符串定义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

来源

2017-02-17 15:34:41

在你的例子中你并没有真正使用曲包括“query = example”到路径中。编码后的实际URL是'/ search％3Fquery％3Dexample'而不是'/ search？query = example'。因此，你的回答并不回答原来的问题。 – kimamula

用户也可以建立这样的事情：

路线：

{ 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

来源

2017-02-17 17:57:21 Bhetzie

这正是我正在寻找的。不知道为什么用户投下了这个答案，它涉及查询参数，但不包含在原始海报的上下文中。无论如何，谢谢。 –

发现在下面的代码中，我将展示如何通过任何途径通过查询字符串参数。

假设我们希望有以下网址：

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

在你的构造注入路由器依赖

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

的导航功能将使我们能够浏览到上述网址

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

来源

2017-09-26 13:36:42

基于查询参数的角度2路由

回答

Demo

相关问题