Angular - 设置应用路由的基本路由参数

Question

Working on an Angular v12 application. Goal is to add /countryCode to the base url of the application so whenever the domain name is opened it automatically sends to domainName/countryCode.

The country code will be added either from localStorage if it was chosen previously (if it exists in the localStorage) otherwise a default country code "us" will be added.

For example: When localhost:4200/ is opened it should automatically redirect to localhost:4200/us/

That part is done .

Issues:

1. What can I do so I don't have to add:countryCode in all -routing.module files and the routing is still functioning.
2. If I'm on a route lets say localhost:4200/us/products and there I change the country from URL ie I change localhost:4200/us/products to localhost:4200/sa/products.

Currently returns me to localhost:4200/sa instead of localhost:4200/sa/products

Code: Added :countryCode route param to the app-routing.module

const routes: Routes = [
  {
    path: '',
    component: DefaultLayoutComponent,
    children:
      [
        { path: ':countryCode', component: HomeComponent },
      ]
  },
]

DefaultLayoutComponent:

   constructor(){
      let countryId: string;
        if(this.localStorageService.getStorage("selectedCountry")){
          countryId = this.localStorageService.getStorage("selectedCountry");
        }
        else {
          countryId = "us";
        }
        this.router.navigate(['/'+countryId]); 
      }

HomeComponent:

constructor(){
     let selectedCountry;
      this.route.params.subscribe((params) => {
        selectedCountry = params.countryCode;
      });
      this.localStorageService.setStorage('selectedCountry', country);
      this.router.navigate(['/'+country]); 
}

Answer 1

One solution is to use query parameter. You need not :countryCode in your routes.

const routes: Routes = [
  {
    path: '',
    component: HomeComponent ,
  },
]

HomeComponent

constructor(
  private router: Router,
  private activatedRoute: ActivatedRoute,
) {}

ngOnInit(): void {
  let countryCode = this.activatedRoute.snapshot.queryParams.countryCode;
  if (countryCode == null ) {
    if(this.localStorageService.getStorage("selectedCountry")){
      countryCode = this.localStorageService.getStorage("selectedCountry");
    } else {
      countryCode = "us";
    }
    this.localStorageService.setStorage('selectedCountry', country);
    this.router.navigate(['/'], { queryParams: { countryCode } });
  }
}

In this case, URL will be localhost:4200/?countryCode=us and localhost:4200/products?countryCode=us and so on.