0

Suppose that I have three different API's that describe categories (Cars, Color, Food). In routerLink I use this routerLink="/{{element.name}}" and in my module I use:

 path: ':id',
 component: ListComponent

Now, when I route it becomes like this: localhost:4200/red, which is fine for me, but how can I send something unique with this URL to make sure that the element is color and handle it somewhere in my code?

Hasan Fathi
  • 5,610
  • 4
  • 42
  • 60
Roula Halabi
  • 268
  • 1
  • 6
  • 15
  • 1
    Well, pass the category and its value: /colors/red, or /cars/ford, or /food/bread. – JB Nizet Jan 24 '18 at 12:48
  • Possible duplicate of [Angular 2 - Pass parameters to Route](https://stackoverflow.com/questions/40045504/angular-2-pass-parameters-to-route) – Hasan Fathi Jan 24 '18 at 13:34

1 Answers1

3

Use something like this:

export const routes: Routes = [
  //...
  { path: 'colors/:color', component: ColorsComponent },
  //...
];

You can use these routes like this in your template:

<a [routerLink]="['/colors', 'red']">Something</a>

Or:

goToRed() {
  this.router.navigate(['/colors', 'red']);
}

Of course 'red' can be a variable too. And you can subscribe to this parameter in your component's ngOnInit():

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.color = params['color'];
       //You can check the color here.
    });
  }

You can use this method for the Cars and Foods too.

UPDATE:

If you want to pass aditional 'parameters'. You can try this:

{
    path: 'colors/:color',
    component: ColorComponent,
    data: {someValue: 123}
}

In your component, you can use this.route.data to access it. The URL will still be look like this: localhost:4200/colors/red for example.

Roland Rácz
  • 2,879
  • 3
  • 18
  • 44
  • Perfect! but how can I make my url like this `localhost:4200/red` but in my function I want to send the `id` not the name, so that I need to show the user 'red' word but actually the value is `id` – Roula Halabi Jan 24 '18 at 13:45
  • In my code's case the URL will look like this (for example): `localhost:4200/colors/red`, and the params['color'] will have the value 'red' as a string. – Roland Rácz Jan 24 '18 at 14:02
  • Do you want to send an additional parameter to the component without showing it in the URL? – Roland Rácz Jan 24 '18 at 14:04
  • Yes for example if I have `localhost:4200/red/123` I want the url shown by user like this `localhost:4200/red` but in my function I will ignore the car and handle the id 123. – Roula Halabi Jan 24 '18 at 14:11
  • Great, but where can I pass the 123 from my html to the aditional parameters? – Roula Halabi Jan 24 '18 at 14:25
  • There are no good solution for this, I think. Maybe you can create a route with `/colors/red/123` and immediately redirect it to `colors/red`, but it's not the best. You have to have every information in your URL that you need in your code. Alternatively, you can use a service to store the `123` value for you, but that is in your Typescript code and not in your HTML. – Roland Rácz Jan 24 '18 at 14:35