Angular8+ 拼装路由地址及使用paramMap或queryParamMap获取url参数

谁借莪１个温暖的怀抱￠ 2024-04-18 18:48 39阅读 0赞

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\]