2

I have below config

 { path:'test/display/:mode' ,component:DisplayComponent }

This is working if i call like

test/display/5

But it not able to find matching route when i give

test/display/?mode=5

I am not able to figure how to make it

Please help Thanks

Md. Parvez Alam
  • 4,326
  • 5
  • 48
  • 108

4 Answers4

1

You have to define your routes differently (auxilary) for both the options:

const routes: Routes = [
    { path: 'test/:mode', component: TestComponent }, // for path variables
    { path: 'test', component: TestComponent }  // for query params
];

For the first one your url will look like: 

http://localhost:4200/test/20

and for the second one:

http://localhost:4200/test?mode=20

And then use queryParams to read the values:

constructor(private route: ActivatedRoute) { 
   this.route.queryParams.subscribe(params => {
        console.log(params['mode']);
    });
}
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Sandeep Kumar
  • 2,397
  • 5
  • 30
  • 37
  • It will have http://localhost:4200/test/?mode=20, (/ before > ?) – Md. Parvez Alam Nov 14 '19 at 10:30
  • It shouldn't matter, once the url is consumed by Angular, '/' is removed. I am able to navigate to the page with or without '/'. – Sandeep Kumar Nov 14 '19 at 10:33
  • I am not able to do that, it is removing / from url, the url should persist, – Md. Parvez Alam Nov 14 '19 at 10:36
  • I don't understand, will there be a problem if the '/' is not there? What are you trying to achieve? If just resolving the route is the problem, then above works. Please let me know if you are trying something else? – Sandeep Kumar Nov 14 '19 at 10:40
  • yes, i am injecting angular app to .net mvc for a single page, so url should be intact – Md. Parvez Alam Nov 14 '19 at 10:41
  • Ok, you see, the URL manipulation is happening only on the UI app, and if you have to communicate with your .Net app, you can do that manually, or if you need it for all such URLs, you can write an interceptor to add '/' to the URL before sending it out or the Angular scope. – Sandeep Kumar Nov 14 '19 at 10:48
0

This is indeed not the same, declaring :mode in your router config tells Angular that you are declaring an angular route parameter, by setting ?mode=5 in the url you are declaring a query parameter. These are handled differently.

Good stackoverflow article on how to use query parameter: How to get query parameters from URL in Angular 5?

Rutger van Dijk
  • 330
  • 1
  • 9
0

Try this way

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    if(this.route.snapshot.paramMap.get('mode')){
        // if mode 
    }else {
        // if not mode
    }
}

{ path:'test/display' ,component:DisplayComponent }

dasunse
  • 2,839
  • 1
  • 14
  • 32
0

The route specifies that it must have a mode parameter on the end, so the alternative form without a mode parameter at the end of the path, is different.

{ path:'test/display/:mode' ,component:DisplayComponent }

if different to:

{ path:'test/display/' ,component:DisplayComponent }

The query string is not part of the route at all, so adding one is not the equivalent of ":mode".

So, you simply need to specify both of these alternative routes if you want to support route parameters and query strings. Generally it's best practice to use route parameters only for required parameters such as the id of a resource you are requesting/updating. Query string parameters are best used for optional parameters, such as search options, data windowing, or algorithm tweaks.

[{ path:'test/display/:mode' ,component:DisplayComponent },
{ path:'test/display/' ,component:DisplayComponent }]

is what you want. Then you can

test/display/5

and

test/display/?mode=5

To obtain the query string value you need to subscribe to the queryParams of the activatedRoute service.

import { Component, OnInit} from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

export class ExampleComponent implements OnInit {

  public mode = null;

  constructor(private activatedRoute: ActivatedRoute) { }

  ngOnInit() {
    this.activatedRoute.queryParams.subscribe((qp: Params) => {
        this.mode = qp['mode'];

    });
  }
}
Matt Langley
  • 23
  • 6