在Angular 2/4中获取URL的路径变量与查询参数

嘿，这个问题我之前也踩过坑！Angular里路径变量（就是URL里:example这类占位符）和查询参数（?后面的query1、query2）是分开存储的，所以你只用route.params肯定拿不到查询参数～

下面给你两种可行的解决方法：

方法1：分开订阅路径参数和查询参数 #

直接分别订阅params和queryParams两个Observable，分别获取对应的值：

// 获取路径变量
this.route.params.subscribe(params => {
  this.example = params['example'];
  this.example1 = params['example1'];
});

// 获取查询参数
this.route.queryParams.subscribe(queryParams => {
  this.query1 = queryParams['query1'];
  this.query2 = queryParams['query2'];
});

这种方式简单直接，但要注意如果组件销毁时记得取消订阅，避免内存泄漏。

方法2：合并Observable一次性获取所有参数 #

如果你想一次性拿到所有参数，可以用RxJS的combineLatest把两个流合并起来，这样一次订阅就能获取全部4个值：

首先需要导入combineLatest：

import { combineLatest } from 'rxjs';

然后编写合并订阅的代码：

this.sub = combineLatest([this.route.params, this.route.queryParams]).subscribe(
  ([params, queryParams]) => {
    this.example = params['example'];
    this.example1 = params['example1'];
    this.query1 = queryParams['query1'];
    this.query2 = queryParams['query2'];
  }
);

别忘了在组件销毁时取消订阅：

ngOnDestroy() {
  this.sub.unsubscribe();
}

进阶：用async管道自动管理订阅 #

如果不想手动处理订阅和取消订阅，Angular的async管道是更好的选择，它会自动帮你管理订阅生命周期：

先在组件里定义一个组合的Observable：

import { combineLatest } from 'rxjs';
import { map } from 'rxjs/operators';

// ...

allParams$ = combineLatest([this.route.params, this.route.queryParams]).pipe(
  map(([params, queryParams]) => ({
    example: params['example'],
    example1: params['example1'],
    query1: queryParams['query1'],
    query2: queryParams['query2']
  }))
);

然后在模板中使用async管道：

<div *ngIf="allParams$ | async as allParams">
  路径变量example：{{ allParams.example }}<br>
  路径变量example1：{{ allParams.example1 }}<br>
  查询参数query1：{{ allParams.query1 }}<br>
  查询参数query2：{{ allParams.query2 }}
</div>

这种方式更简洁优雅，还能避免内存泄漏问题～

内容的提问来源于stack exchange，提问作者Am Novice