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]