Angular路由使用queryParams传递字符串参数异常问题求解

• Angular 路由的 queryParams 配置项要求传入键值对结构的对象，用来定义查询参数的参数名和参数值的映射关系
• 你直接传入了字符串类型的 stringdata，JavaScript 中字符串属于类数组对象，会被 Angular 自动按索引遍历拆分，每个字符的下标会被当做查询参数名，对应的字符当做参数值，就出现了字符被拆分、地址栏出现0=H&1=E这类参数的问题。

发送参数的 Component1 代码 #

stringdata = "Hello";
// 给需要传递的字符串指定自定义参数名，示例中参数名为 data
this.router.navigate(['component2'], { queryParams:  { data: stringdata } });

接收参数的 Component2 代码 #

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    // 按自定义的参数名取值，即可拿到完整的原字符串
    console.log(params.data) // 输出结果为 Hello
  })
}

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