1

My Requirement is From Backend I am getting routes as "app/dashboard?dashboard_id={id}" How can I configure this in Module.ts file?

I tried using below

const routes: Routes = [
  {
    path: "app/dashboard/:dashboard_id",
    component: AddEditComponent,
    canActivate: [AuthGuard],
  },
];

but I am getting errors like routes are not defined.

Can Someone Please Help me on that how can I configure this route as I need to catch this id as queryParams in Component.

Manish
  • 41
  • 6
  • It is some data passed through queryParams. You can get the data using the Router in your AddEditComponent. Something like this https://stackoverflow.com/questions/47455734/how-to-get-query-parameters-from-url-in-angular-5. – Anglesvar Aug 03 '22 at 07:25
  • Your route will just be `app/dashboard` – Anglesvar Aug 03 '22 at 07:25
  • Actually when clicking, ? is converting to %3f and same with = that's why application breaking – Manish Aug 03 '22 at 07:47
  • You can simple decode your URL like this. `decodeURI(url)` – Anglesvar Aug 04 '22 at 08:36

2 Answers2

0

You can do something like this:

const routes: Routes = [
  {
    path: "app/dashboard",
    component: AddEditComponent,
    canActivate: [AuthGuard],
    children: [
        {
            path: ':dashboard_id'
            component: NewComponentId
        }
    ]
  },
];

and in your NewComponentId you can do something like inside the constructor to catch the id:

this.route.paramMap.pipe(
      map((paramMap) => {
        if (paramMap.get('id') !== 'something') {
          // your code
        }
      }),
Elidor00
  • 1,271
  • 13
  • 27
  • Actually when clicking, ? is converting to %3f and same with = that's why application breaking – Manish Aug 03 '22 at 07:47
0

Required Route param:

{path: 'users/:userId', component: UserComponent}

and get it from param:

constructor(params: RouteParams) {
    var paramId = params.get("id");
}

Optional Route Param:

  { path: '/user', component: UserComponent }

its just define the route part and param pass by query string, to read the queryparam:

this.route.queryParams
      .subscribe(params => {
        console.log(params);
      }
    );

you must process the query string for this route: "app/dashboard?dashboard_id={id}"

Update:

To set the queryparam in routerlink use it this way:

  <a routerLink="/dashboard" [queryParams]="{ dashboard_id: 11 }"
    >another dashboard</a>
Masoud Bimmar
  • 6,941
  • 4
  • 30
  • 33