Angular 9中如何从URL获取路由参数与查询参数并拼接为指定格式字符串

Got it, let's fix this up. The key here is to combine the two observables (params and queryParams) so we can process both sets of data at once, then format them into your desired string. Also, I noticed a small issue in your original code: you didn't mark the route as private in the constructor, so this.route would be undefined—we'll fix that too.

Here's the updated code with explanations:

import { Component, OnInit, ActivatedRoute } from '@angular/core';
import { combineLatest } from 'rxjs'; // Import combineLatest to merge observables

@Component({
 selector: 'my-app',
 templateUrl: './app.component.html',
 styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
 name = 'Angular';
 result: string = ''; // Our dynamic result variable

 // Mark route as private to access it in ngOnInit
 constructor(private route: ActivatedRoute) {}

 ngOnInit() {
  // Combine params and queryParams observables to get updates from either
  combineLatest([this.route.params, this.route.queryParams])
    .subscribe(([params, queryParams]) => {
      // Step 1: Get the route param(s)
      // If you know the exact param name (e.g., 'fullRoute'), use params.fullRoute instead
      const routeParamPart = Object.values(params).join(''); 
      // ^ Joins multiple route params if you have them; uses the single value if only one

      // Step 2: Format query params into key=value&key2=value2
      const queryParamPart = Object.entries(queryParams)
        .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
        // ^ Encode values to handle special characters (like spaces, &, etc.)
        .join('&');

      // Step 3: Build the final result string
      if (queryParamPart) {
        this.result = `${routeParamPart}?${queryParamPart}`;
      } else {
        this.result = routeParamPart;
      }

      console.log('Final Result:', this.result);
    });
 }
}

Key Notes: #

• Combine Observables: Using combineLatest ensures we get the latest values from both params and queryParams whenever either changes—perfect for keeping your result variable dynamic.
• Route Params Handling: If your route has multiple params (e.g., /param1/:param2/:param3), adjust the routeParamPart line to join them with your desired separator. For example:

  const routeParamPart = `${params.param1}:${params.param2}:${params.param3}`;
  

• Query Params Encoding: Using encodeURIComponent is important to handle special characters in query param values (like lang=en-US or search=hello world) without breaking the URL format.
• Edge Cases: If there are no query params, the result will just be the route param string—no extra ? added.

Testing with your example URL (fixed to use & instead of the invalid second ?):

• URL: abc.com/abc:abc:abc:0xa35df9cdf?ab=1234567&lang=en
• Result: abc:abc:abc:0xa35df9cdf?ab=1234567&lang=en (exactly what you need!)

内容的提问来源于stack exchange，提问作者A prasad