2 routes for one Angular component

Question

I'm wondering is it possible to have 2 different routes that point to 1 single component? For example:

{ path: 'signin', component: SignInComponent },
{ path: 'tenant/:id/signin', component: SignInComponent }

I'm asking because I have some wired behaviour..

Yes, its possible. its upto you how you handle functionality implementation inside your Component — ranakrunal9, Dec 22 '16 at 06:26
routerLinkActive is not activated, I've just updated example — Vnuuk, Dec 22 '16 at 06:35
routerLinkActive doesn't work for second route. where could be a problem? — Vnuuk, Dec 22 '16 at 06:36
@Vnuuk, could you post the related code of your routing, this isn't very helpful,e.g the navigation and subscribing and anything else related. — AT82, Dec 22 '16 at 07:20
... Though technically speaking you already got an answer to your original question... ;) — AT82, Dec 22 '16 at 07:22
it works for me. http://stackoverflow.com/questions/34500147/angular-2-getting-routeparams-from-parent-component — Yang, Dec 26 '16 at 09:42

saurav1405 · Accepted Answer · 2016-12-22T08:48:56.733

6

Yes you can use 2 different route that point to the same component. But when you navigate from a route to a different route that uses the same component as the previous route then angular reuses your component instance. It does not create a new instance of your component.

If you will navigate from 'signin' to 'tenant/:id/signin' then angular will use the same instance of SignInComponent that it created for 'signin'. The constructor and init methods of SignInComponent will not be called. You can use observable in your init method. The params method of ActivatedRoute is a observable. You can do something like this to extract the parameter:

route is your ActivatedRoute instance

ngOnInit() {
  this.route.params
    .switchMap((params: Params) => this.service.getHero(+params['id']))
    .subscribe((hero: Hero) => this.hero = hero);
}

The switchMap operator allows you to perform an action with the current value of the Observable, and map it to a new Observable. This code gets a hero with id specified in the route from the service. You can do something like this. If you will post the code then I can tell you what exactly you need to do.

edited Dec 22 '16 at 08:48

answered Dec 22 '16 at 08:31

saurav1405

399
3
9

How does angular distinguish between different components? If there's two routes, like `user` and `user/:gender`, navigation works fine between them, but failed from `user/male` to `user/female`. – Yang Dec 26 '16 at 09:21
I did'nt get your question. Can you please explain? – saurav1405 Dec 26 '16 at 09:42
I'm sorry I didn't say that clearly. There's two routes use the same component, like `{path: 'user', component: UserComponent}` and `{path:'user/:gender', component: UserComponent}`. The navigation works fine from `/user` to `/user/male` in angular 2, and vice versa. But it failed between `/user/male` and `/user/female`. I mean that angular create the new component at the former scenario even the component is the same, but not at the latter one. – Yang Dec 27 '16 at 00:16
Okay Now I understand the problem you are facing. But it should not be the case angular should reuse the component in both the cases. If you can please share some code then I will be able to help more. – saurav1405 Dec 27 '16 at 04:16
1

The reason should be that `/user/male` and `/user/female` path are matched as the same rule of routes, so angular will reuse the component instance. By comparison, the rules are different for `/user` and `/user/xxx`. – Yang Dec 28 '16 at 00:29
@saurav1405 I tried following ur approach but couldn't manage. can u plz this link https://stackoverflow.com/questions/45790858/how-to-reuse-a-single-component-with-multiple-routes-without-creating-instance-o – Zaker Aug 21 '17 at 11:08

2 routes for one Angular component

1 Answers1