如何定义queryParams Angular 5路由器

Question

我对查询参数有疑问。每个路由器都有一些不同的查询参数。

$stateProvider 允许在 $state 中定义 queryParams

.state('contacts.list', {
    templateUrl: 'contacts.list.html',
    url: '/test?test1&test2'
    data: {
        customData1: 44,
        customData2: "red"
    } 
  })

此代码只允许从 queryParams 中获取 test1 和 test2 字段。

关于新的 Angular 路由器，如果我需要观看 queryParams，我应该订阅

this.activatedRoute.queryParams.subscribe(params => {

});

这段代码有问题，如果我在 url 中输入一些第三方 test3=lol，我会在参数 params 中得到这个参数，我不想在所有地方过滤它

如何在 Angular 5 路由器中设置 '/test?test1&test2'

Answer 1

goProducts() {
  this.router.navigate(['/products'], { queryParams: { order: 'popular', 'price-range': 'not-cheap' } });
}

而且网址会是这样的。

http://localhost:4200/products?order=popular&price-range=not-cheap

在你的组件构造函数中

this.activatedRoute.queryParams.subscribe(params => {

});

希望这会有所帮助。使用this 回答您的问题。