Add parameter to a route and use in a conditional-CodePudding

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

CodePudding user response：

to get the query params from the component, you can use ActivatedRoute service:

from your component:

construction(private route: ActivatedRoute,
(...)
)

// then you can subscribe to the query string params from your functions with

   this.route.queryParams.subscribe(params => {
     this.name = params['name']; // 
   });

You can find more info about the router service in Angular's website

CodePudding user response：

Specify your query parameter name ('id' in this case, not 'name'):

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

and don't use /:id - it designed for complex routes (like http://localhost:8100/scenario/id):

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