CODEWITHSUNDEEP
angularroutes
Domenic
Domenic

Reputation: 738

Angular2 Routing: Multiple Components at once

I have an angular 2 app in which there are sitting two independend functionalities aka components next to each other (let's call them A and B). Now I want to change what lives in Component A via routing. So far so good. That would be a normal scenario in which we would call Component A the app content component.

My problem is I want to be able to also change what's inside component B via routing.

Of course I could now create routes like http://foo.bar/what-lives-in-a/123/what-lives-in-b/abc But imagine an app where there are hundreds of things that could live in A and dozends of things that could live in B. I think it would be too painful to create all these sub-routes by hand.

So does anyone of you know a good way to tackle that problem?

Upvotes: 3

Views: 3048

Answers (1)

Yaroslav Yakovlev
Yaroslav Yakovlev

Reputation: 6483

What you want can be achieved with 2 independent router outlets. It makes sense as the components are independent. So you are, probably, already having the main router outlet which is in the topmost component and is specified like that: <router-outlet></router-outlet>

To specify another one you need to write the following: <router-outlet name="forComponentB"></router-outlet> After that you will have to add the route for the named router outlet like that:

,{path: "comp-b-path", outlet: "forComponentB", component: ComponentB}

So the resulting url will look something like that: baseurl/comp-a-url(forComponentB:comp-b-path) and you can manage the state of both components independently by changing the main url or the one in parentheses. Note, that you can add parameters to each of the urls, so its very flexible.

Upvotes: 5

Related Questions