Angular2 two routes to one component?

Question

In Angular 2 I would like to define two routes, which use the same Component, but one route being a special case using a special preset parameter. Now what I want to do is his:

@RouteConfig([
  { path: '/',  name: 'Home', component: HomeComponent    },
  { path: '/user/:id', name: 'User', component: UserComponent  },
  { path: '/special-user', name: 'User', component: UserComponent, params:{'userId':'123'}  },
])

The thing I need is "params" in the last route-definition to "/special-user". Is this possible at all?

Edit: in the path /user/:id the id is part of the url, but in the special-user-case I would like for the id to be invisible and not to be part of the url

tchelidze · Answer 1 · 2016-06-01T14:36:03.007

8

Angular 2 Beta.x

Define route as

@RouteConfig([ 
  ...
  { path: '/special-user/:userId', name: 'SpecUser', component: UserComponent}
])

Use

inside template

[routerLink]="['SpecUser', {userId:123}]"

inside component

export class SomeComponent  {
  constructor(private router: Router) {}

  someMethod() {
    this.router.navigate(['SpecUser', {userId:123}]);
  }
}

Angular 2 RC

Define route as

@Routes([ 
  ...
  { path: '/special-user/:userId', component: UserComponent}
])

Use

inside template

[routerLink]="['/special-user', 123]"

inside component

export class SomeComponent  {
  constructor(private router: Router) {}

  someMethod() {
    this.router.navigate(['/special-user', 123]);
  }
}

edited Jun 01 '16 at 14:36

answered Jun 01 '16 at 14:20

tchelidze

8,050
1
29
49

Thanks for your answer! Is there a way to have the URL "www.example.com/special-user" use the userID=123 without specifying it in the URL, but rather in the Controller. I want the URL to be pretty without the ID as a get-parameter – Tobias Gassmann Jun 06 '16 at 07:21
@TobiasGassmann placing `routerLink` in template, generates `` as you know, say you have two user with `id : 1` and `id : 2`, and place two corresponding `` on template without specifying `id`. it's not distinguishable which link should navigate to first user and which to second. There are maybe [techniques to modify URL via Js](http://stackoverflow.com/questions/824349/modify-the-url-without-reloading-the-page) , but on template, link must contain `id` – tchelidze Jun 07 '16 at 07:50

score 4 · Accepted Answer · answered Jun 06 '16 at 07:44

4

I have found the answer in this article:

https://auth0.com/blog/2016/01/25/angular-2-series-part-4-component-router-in-depth/1

configure the route

@RouteConfig([
  { path: '/myroute', component: MyComponent, name: 'MyRoute', data: { isAdmin: true } }
])

inside the component:

import {RouteData} from 'angular2/router';

export class MyComponent {
  isAdmin: boolean;

  constructor(data: RouteData) {
    this.isAdmin = data.get('isAdmin');
  }
}

answered Jun 06 '16 at 07:44

Tobias Gassmann

11,399
15
58
92

1

PS:- there is no more `name` while using routing in angular2 RC – Pardeep Jain Jun 06 '16 at 07:54
1

For **Angular2 Release**, instead of `RouteData` you need `ActivatedRoute`. So the constructor would look like: `constructor(data: ActivatedRoute) { this.isAdmin = !!data.snapshot.data['isAdmin']; }`. I advise to use the !! as a trick for converting anything (including undefined) to boolean – Alex Klaus Feb 25 '17 at 11:04

Angular2 two routes to one component?

2 Answers2