Assembly routing address of angular 8 and acquisition of url parameters

Our common url formats are as follows:

http://localhost:4200/todo/search?name=111&type=222

As we can see from angular routing, there is another form of URL called matrix url. Its format is as follows:

https://localhost:4200/todo/search;name=111;type=222

Instead of using question marks "?" and "&" to separate parameters, it uses semicolons ";".

• On matrix url

Matrix URL representation is an idea put forward by Tim Berners-Lee, the founder of web in 1996.

Although matrix representation has never been included in HTML standards, it is legal and popular in browser routing systems as a way to isolate parameters belonging to parent and child routing.

Router is such a system that supports matrix representation across browsers.

Assembly matrix url and standard url format

  constructor(
      private router: Router, // <--Introducing Router
  ) {}
  // Assembly matrix url
  // localhost:4200/todo/search;name=111;type=222
  gotoSearch1(item) {
      this.router.navigate(['/todo/search', { 
        name: item.name, 
        type: item.type, 
      }]);
  }
  // Assemble classic url 
  // localhost:4200/todo/search?name=111&type=222
  gotoSearch2(item) {
    this.router.navigate(['/todo/search'], { 
        queryParams: { 
            name: item.name, 
            type: item.type 
        }
    });
  }

Get the parameter value of matrix url

localhost:4200/todo/search;name=111;type=222

Use this.route.params or this.route.paramMap to get the matrix URL parameters

  constructor(
    private route: ActivatedRoute // <--Introducing Activated Route
  ) { }
  private name: string
  private type: string

  ngOnInit() {
    // Get the parameters, using params
    this.route.params.subscribe(params => {
        console.warn(params);
        this.name = params['name'];
        this.type = params['type'];
    });

    // Using paramMap
    this.route.paramMap.subscribe(data => {
        console.log(data['params'].name);
    })
  }

Get the parameter value of traditional url

localhost:4200/todo/search?name=111&type=222

Use this.route.queryParams or this.route.queryParamMap to get URL parameters

  constructor(
    private route: ActivatedRoute // <--Introducing Activated Route
  ) { }
  private name: string
  private type: string

  ngOnInit() {
    // Get the parameters, using 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'];
    });

    // Get the parameters, using queryParamMap
    this.route.queryParamMap.subscribe(data => {
        const params = data['params'];
        console.log(params);
        this.name = params['name'];
        this.type = params['type'];
    });

  }

Reference content

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]