在 Angular2 中使用 QueryParam 处理路由

Question

我的申请中有两条路线

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

我需要做什么才能使它们正常工作？

带有查询字符串 ?cInfo=askjdfkajsdfkasd 的路由应该转到 PostComponent

和像 activity/skjdfhakjdfhaajsdf 这样的路由应该转到 PostDetailComponent

我试过了

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

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

angular是否像大多数 MVC 一样区分 queryParams 和 pathVariables？

Answer 1

我认为你必须这样声明你的路由。

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

因此，当您导航到 /activity?cInfo=askjdfkajsdfkasd 时，路由器将与第一个定义的路由 (/activity) 匹配，并且然后你可以检索传递给组件内部路由的queryParameters (PostComponent).

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

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

当然需要import @angular/route ActivatedRoute

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

并在构造函数中将路由设置为 ActivatedRoute 类型的属性在第一个代码片段之前（应该在组件的 ngOnInit 方法中 class，这意味着您的组件 class 必须从 @angular/core).

实现 OnInit

constructor(
    private route     : ActivatedRoute
){}

在 Angular2 中使用 QueryParam 处理路由

Handle Routes with QueryParam in Angular2

angular2-routing

angular2-router

angular2-cli

angular