Search code examples
angularionic-frameworkangular-ui-routerionic4

Add parameter to a route and use in a conditional


I have a simple routing like this:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
{
    path: 'scenario',
    loadChildren: () => import('./pages/scenarios/scenario/scenario.module').then( m => m.ScenarioPageModule)
  }
 ]

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

As you can see I have a "scenario" view so in my app.component.ts I have this to navigate that route:

this.navController.navigateRoot('scenario');

So, the current path is: http://localhost:8100/scenario

Now, I want to have a condition in my app.component.ts if that route contains a specific parameter like http://localhost:8100/scenario/?id=C3E1EE21-A62C-452F-BE0D-AC3EF5449F23 do something special. What should I do to routing to accept parameter id, then in app.component.ts read if parameter comes, do a simple if like:

if(url.contains(parameter))
{

}

How can I achieve this? Regards

UPDATE

I tried to use on app.component.ts

    import { ActivatedRoute, NavigationEnd, Router, UrlSegment } from '@angular/router';


export class AppComponent implements OnInit {

constructor(
private activatedRoute: ActivatedRoute,
)

ngOnInit(){
  
    this.activatedRoute.queryParams.subscribe(params => {
      var name = params['name'];
      console.log(name)
    });
  }

But got undefined on console.log, do I need to change something on the route module in order to accept parameters? because parameter got deleted when I look for: http://localhost:8100/scenario/?id=C3E1EE21-A62C-452F-BE0D-AC3EF5449F23

So I try to add in route module a new path like:

{
    path: 'scenario/:id',
    loadChildren: () => import('./pages/scenarios/scenario/scenario.module').then( m => m.ScenarioPageModule)
  },

but throwing same result


Solution

  • For some reason, I can not access to route use activated route or route, so I use an alternative.

    Created a method to get parameter with pure js

     getParameter() {
         if (document.URL.indexOf("?") > 0) {
             let splitURL = document.URL.split("?");
             let splitParams = splitURL[1].split("&");
             let i: any;
             for (i in splitParams){
                 let singleURLParam = splitParams[i].split('=');
                 if (singleURLParam[0] == "id"){
                     this.id = singleURLParam[1];
                 }
             }
         }
    }
    

    Now I can access it using this.id