Multiple components on one page and routing in Angular2?

Question

Angular

Hello! I am learning Angular2 (before that I had no business with newfangled front-end frameworks), I am trying to repeat the application in the likeness of 2GIS. The essence of the problem: I plan to place several components on one screen, but I don’t quite understand how to organize routing in this case. When, depending on the route on the page, I show a separate component, everything is clear. But for example, there are three components AuthComponent, ListComponent, ItemComponent. I want the following diagram.
When I click on the /login link, I want the login block to appear on the page (AuthComponent)

On the link /shops - a block with a list of stores (ListComponent)

On the link /shops/1 - a block with a specific store (ItemComponent

) any example of a nose how it should be?

Answer 1

There are several options, the first one is to throw everything into one component, and using *ngIf already display everything (but this is a bad option), the second option, you just create the same (almost) components and go through them, example:

{path: 'login', component: AuthComponent},
          {path: 'shops', component: ListComponent},
          {path: 'shops/:id', component: ItemComponent},

good example

Answer 2

Tell me how did you bring the 2GIS API to Angular2? I'm trying to connect 2gis maps to the component, as a result, fzsh is loaded, the map itself works, the marker is displayed, navigation elements, but all this is on a yellow background. The result is that the pictures of the maps themselves are not initialized, but they are loaded and this can be seen in DevTools. For some reason, their height is always 0px.
Please share how you initialized API map in Angular2+??
Now everything looks like this: