Angular8+ 拼装路由地址及使用paramMap或queryParamMap获取url参数
作者:互联网
angular8 拼装路由地址及获取url参数
我们常见的 url格式都是这样的:
http://localhost:4200/todo/search?name=111&type=222
通过 angular 路由我们可以看到,其实url还有一种格式,叫矩阵URL (matrix url)。其格式如下:
https://localhost:4200/todo/search;name=111;type=222
它不用问号 “?” 和 “&” 来分隔参数,而是使用分号 “;” 来分隔。
- 关于 matrix url
矩阵URL表示法,是 web 创始人 Tim Berners-Lee 于1996年提出的一个想法。
尽管矩阵表示法从未被纳入HTML标准,但它是合法的,并且作为一种隔离属于父路由和子路由的参数的方法,它在浏览器路由系统中非常流行。
路由器就是这样一个系统,它支持跨浏览器的矩阵表示法。
拼装 matrix url 与 标准的url 格式
constructor(
private router: Router, // <-- 引入 Router
) {}
// 拼装 matrix url
// localhost:4200/todo/search;name=111;type=222
gotoSearch1(item) {
this.router.navigate(['/todo/search', {
name: item.name,
type: item.type,
}]);
}
// 拼装 classic url
// localhost:4200/todo/search?name=111&type=222
gotoSearch2(item) {
this.router.navigate(['/todo/search'], {
queryParams: {
name: item.name,
type: item.type
}
});
}
获取 matrix url 的参数值
localhost:4200/todo/search;name=111;type=222
使用 this.route.params 或 this.route.paramMap 来获取 matrix URL 参数
constructor(
private route: ActivatedRoute // <-- 引入 ActivatedRoute
) { }
private name: string
private type: string
ngOnInit() {
// 获取参数, 使用 params
this.route.params.subscribe(params => {
console.warn(params);
this.name = params['name'];
this.type = params['type'];
});
// 使用 paramMap
this.route.paramMap.subscribe(data => {
console.log(data['params'].name);
})
}
获取传统 url 的参数值
localhost:4200/todo/search?name=111&type=222
使用 this.route.queryParams 或 this.route.queryParamMap 来获取URL参数
constructor(
private route: ActivatedRoute // <-- 引入 ActivatedRoute
) { }
private name: string
private type: string
ngOnInit() {
// 获取参数, 使用 queryParams
let param1 = this.route.snapshot.queryParams["name"];
let param2 = this.route.snapshot.queryParams["type"];
console.log(param1);
console.log(param2);
this.route.queryParams.subscribe(params => {
console.log(params);
this.name = params['name'];
this.type = params['type'];
});
// 获取参数, 使用 queryParamMap
this.route.queryParamMap.subscribe(data => {
const params = data['params'];
console.log(params);
this.name = params['name'];
this.type = params['type'];
});
}
参考内容
https://angular.io/guide/router
https://stackoverflow.com/questions/40171262/angular2-with-matrix-url-notation
https://stackoverflow.com/questions/35688084/how-to-get-query-params-from-url-in-angular-2
[END]
标签:name,url,route,params,queryParamMap,type,Angular8,matrix 来源: https://blog.csdn.net/cnwyt/article/details/100705746