Angular2向路由器url添加参数

Question

我是 angular2 的新手，我期待在当前 url 没有点击事件的所述参数时向路由器添加参数

这是我试过的

按钮

<button (click)="onStats()">Proceed to stats </button>

现在的功能

onStats(){
    let url = this.router.url;

    //here i would like to check if the router constains ?stats
    //am stuck

}

所以基本上我的网址是

locahost:4200/users/roles
localhost:4200/managers
...............

现在我想在 url 的末尾添加 ?stats 如果它不存在因此新的 url 是

locahost:4200/users/roles?stats
locahost:4200/managers?stats
...........

在我的路由中我有设置

{path:'user/roles:stats' , component:UserRolesStats}

我该怎么做

我不想对 routerlink="users/roles?stats"进行硬编码，因为其他领域也使用此统计功能

Answer 1

检查当前查询参数

使用ActivatedRoute 服务订阅当前路由的查询参数。您可以像这样检查 ?stats 是否存在:

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

constructor(private route: ActivatedRoute) {}
private stats: boolean;    

ngOnInit() {
    this.route
      .queryParams
      .map(params => params['stats'])
      .subscribe(stats => this.stats = !!stats);
  }

official docs 中有很多有用的信息可供阅读:

Query Parameters and Fragments are also available through the ActivatedRoute service. Just like route parameters, the query parameters and fragments are provided as an Observable

在导航过程中添加查询参数

要在导航时添加查询参数，您可以将 NavigationExtras 参数添加到 router 的 .navigate() 方法或将 [queryParams] 指令添加到您的链接。

来自代码:

this.router.navigate(['/users/roles'], { queryParams: { stats: true } });

来自模板:

<a [routerLink]="['/users/roles']" [queryParams]="{ stats: true }">