Question

我正在寻找与?p=%20some%random%20query之类的任何请求都匹配的路由定义。我对路线的当前定义：

const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'blog/:title', component: BlogComponent },
{ path: '**', pathMatch: 'full', component: HomeComponent },];

我的想法是使用p和

获取查询参数{ path: '**', pathMatch: 'full', component: HomeComponent }

 ngOnInit() {
     let id = this.route.snapshot.paramMap.get('p');
 }

。但是，似乎angular只支持结构/：a /：b的查询。例如，查询http://localhost:4200?p=yoyoyo将转换为http://localhost:4200/yoyoyo。与http://localhost:4200/?p=/blog/Add%20Token相同的结果将被转换为http://localhost:4200/blog/Add%20Token。因此，我无法检索查询参数p的值。如何制作一条适用于p=%的路线？如何获取p的值？

这可以通过拦截路由过程来实现吗？

Answer 1

对我来说，唯一可行的地方是本地路线本身。 ”和“ **”只是“重定向到homecomponent

const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'home', component: HomeComponent },
{ path: 'blog', component: BlogComponent },
{ path: 'blog/:title', component: BlogComponent },
{ path: '**', pathMatch: 'full', redirectTo: 'home' },];

在homecomponent中，您需要订阅以获取更改

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    this.route.queryParams.subscribe(value => console.log(value) )

}

Answer 2

对我来说，以下设置有效。

首先，我必须删除路线{ path: '', redirectTo: '/home', pathMatch: 'full' },。

然后，我创建了以下路由（和PageNotFound组件）来处理p参数{ path: ':p', component: PageNotFoundComponent },。

在PageNotFoundComponent中，我能够使用其值检索p参数。根据其值，我决定下一条路线。

ngOnInit() {
 let id = this.route.snapshot.paramMap.get('p');
 if (id == null) {
  this.Link = "/home";
 }
 else {
  this.Link = "/" + this.route.snapshot.paramMap.get('p');
 }
 this.router.navigate([this.Link]);
}

如果有人导航到页面http://localhost:4200/?p=/blog/Add%20Token，则将点击p路线，并且该请求将转发到PageNotFound组件。在组件本身中，我决定下一步将发生什么。变量id的值为blog/Add%20Token。

[EDIT]我成功地将此解决方案与该404.html页面和有角度的应用程序结合使用来处理github页面重定向。

获取查询参数

2 个答案: