【问题标题】：List of queryParams is empty in Angular 5 routingAngular 5路由中的queryParams列表为空
【发布时间】：2018-12-04 21:34:29
【问题描述】：

我是 Angular 的新手，我一直在寻找解决问题的方法，但不幸的是我还没有找到。当我将参数传递给路由器（路由器类）时，但参数列表（在目标站点上）为空。

let navigationExtras: NavigationExtras ={
  queryParams: {
    uri: item.uri
  }
}

this.router.navigateByUrl('articlelist/article-details', navigationExtras);

文章详情组件（路由为ActivatedRoute类）：

   ngOnInit(): void {
        console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
    this.route.queryParamMap.map(paramMap =>{
            this.uri = paramMap.get('uri');
            console.log(this.uri);
        });
    }

ArticleList 模块中的路由（我项目中的模块之一）：

const routes: Routes = [{
  path: '',
  component: ArticleListComponent,
    data: {
      title: 'ArticleList'
    },
  },
{
  path: 'article-details',
  component: ArticleDetailsComponent,
  data: {
    title: 'ArticleDetails'
  },
}
];

当我在目标组件中记录 route.url 时，结果是：

文章详细信息组件 {"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"article -details","parameters":{}}]}

如果有人知道如何修复它，我将不胜感激:)

【问题讨论】：

在您的 ngOnInit 中尝试 console.log(this.route.snapshot.queryParamMap)
{"params":{}} 这是结果
您是否尝试使用硬编码字符串而不是 item.uri，它可能未定义。你能在浏览器上看到查询字符串参数吗？

标签： angular typescript router optional-parameters angular-activatedroute

【解决方案1】：

您应该需要使用ActivatedRoute 才能获取所有查询参数。

试试这个 -

constructor(
    private activatedRoute: ActivatedRoute
  ) { }

this.activatedRoute.queryParams.subscribe(params => {
      const URI = params['uri'];
    });

更新

尝试像这样发送参数 -

this.router.navigate(['articlelist/article-details' ], {
      queryParams: {
        uri: item.uri || 'Default'
      }
    });

【讨论】：

params['uri'] 未定义：/
您确定参数在路由时正确发送
如何检查？
查看浏览器网址
不，您的查询参数未正确发送，请检查我更新的答案并像那样执行您的代码

【解决方案2】：

我建议您获取路线的快照，而不是依赖 Observables。这将为您提供一个包含参数的简单对象。

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  console.log(this.route.snapshot.queryParams);
}

【讨论】：

不幸的是，结果是一个空列表：/
那你的路由有问题。请发布minimal reproducible example 重现该问题。
我还看到一个空列表。当我使用this.activatedRoute.queryParams.subscribe 表单时，我最终会得到查询参数，但如果我使用this.activatedRoute.snapshot.queryParams 表单，那就是空的。好像快照拍得太早了。

【解决方案3】：

您可以在 app.routing.module.ts 中定义参数：

{ path: 'examplePath/:id', component: YourComponent},

然后这样发送：

this.router.navigate(['/examplePath/' + id]); (with @angular/router/Router)

然后在你的组件构造函数中你可以获得参数（使用@angular/router/ActivatedRoute）：

this.activatedRoute.params.subscribe(params => {
    this.yourObject = params['id'];
}

【讨论】：

那不是查询参数
是的。也可以用同样的方式订阅activatedroute.queryParams