在Angular中,路由解析时未将编码的查询参数解析的解决方法是使用decodeURIComponent()
函数解码查询参数。
以下是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-my-component',
template: `
My Component
Query Param: {{ queryParam }}
`,
})
export class MyComponent implements OnInit {
queryParam: string;
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParamMap.subscribe(params => {
// 获取编码的查询参数值
const encodedQueryParam = params.get('param');
// 解码查询参数值
this.queryParam = decodeURIComponent(encodedQueryParam);
});
}
}
在上面的代码中,我们使用了ActivatedRoute
来订阅路由的查询参数变化。在subscribe
回调函数中,我们首先通过params.get('param')
获取编码的查询参数值。然后,我们使用decodeURIComponent()
函数来解码查询参数值,并将解码后的值赋给queryParam
属性。
通过这种方式,我们可以确保路由解析时正确解析编码的查询参数。
上一篇:Angular路由解析器执行两次
下一篇:Angular路由可选参数验证