处理与QueryParam航线Angular2

Question

我在appilcation两条路线

{path: 'activity/?cInfo=askjdfkajsdfkasd', component: PostComponent}, 
{path: 'activity/:id', component: PostDetailComponent} 

是我必须做的，使他们的工作？

路线与查询字符串？CINFO = askjdfkajsdfkasd应该去PostComponent

和路线像活动/ skjdfhakjdfhaajsdf应该去PostDetailComponent

我试图

{path: 'activity/?cInfo=askjdfkajsdfkasd', component: PostComponent,canActivate:[CheckForListPage],pathMatch:'full'}, 
{path: 'activity/:id', component: PostDetailComponent,canActivate:[CheckForDetailPage]} 

但每次调用1次。警卫正在返回布尔值。

像大多数MVC那样，queryParams和pathVariables之间的角度区分吗？

Answer 1

我想你必须以这种方式申报你的路线。

{path: '/activity', component: PostComponent,canActivate:[CheckForListPage]}, 
{path: '/activity/:id', component: PostDetailComponent,canActivate:[CheckForDetailPage]} 

所以，当你浏览到/活动？CINFO = askjdfkajsdfkasd路由器将匹配定义的第一路径（/活动），然后你可以检索传递给路由组件内queryParameters （PostComponent）。

ngOnInit(): void { 
    this.route.queryParams 
     .subscribe(params => { 
      // complete params object 
      console.log(params); 

      // your param passed 
      console.log(params['cInfo']) 
     }); 
} 

当然，你需要进口@角/路由ActivatedRoute

import { ActivatedRoute } from '@angular/router'; 

而且在构造函数的第一个代码段之前类型的属性ActivatedRoute（这应该是在ngOnInit方法设定的路径你的组件类，这意味着你的组件类必须从@ angular/core实现OnInit）。

constructor(
    private route  : ActivatedRoute 
){}