Несколько компонентов на одной странице и роутинг в Angular2?

Question

[Андрей Шубин]

Здравствуйте! Изучаю Angular2 (до этого дел с новомодными front-end фреймворками не имел), пытаюсь повторить приложение на подобии 2GIS. Суть проблемы: На одном экране планирую расположить несколько компонентов, но не совсем понимаю как организовать роутинг в этом случае. Когда в зависимости от роута ан странице показываю отдельный компонент - всё понятно. Но например, есть три компонента AuthComponent, ListComponent, ItemComponent. Хочу примерно следующую схему.

Когда перехожу по ссылке /login - то хочу, чтобы на странице появлялся блок для входа (AuthComponent)


По ссылке /shops - блок со списком магазинов (ListComponent)


По ссылке /shops/1 - блок с конкретным магазином (ItemComponent)


Ткните в какой-нибудь пример носом, как это должно быть?

Answer 1

[Ленар Мутигуллин]

Есть несколько вариантов, первый, все закинуть в один компонент, и с помощью *ngIf уже все отображать(но это плохой вариант), второй вариант, просто создаешь одинаковые(почти) компоненты и переходишь по ним, пример:

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

Хороший пример

Comments

[Андрей Шубин]

"просто создаешь одинаковые(почти) компоненты и переходишь по ним" - то есть все элементы управления и карту копировать в каждый компонент?

[Ленар Мутигуллин]

Андрей Шубин: зачем копировать? просто прописываешь компоненты например в "логин" будет:
//логин


"shops":
//shops

и т.д.

Answer 2

[Александр Гловацкий]

Подскажите как вы вывели API 2GIS в Angular2? Пробую подключить 2gis карты копоненте, в результвте фзш подгружается, сама карта отрабатывает, маркер отображается, элементы навигации, но всё это на желтом фоне. Pезультат - не инициализируются сами картинки карт, нотя они подгружаются и это видно в DevTools. Почемуто всегда их высота равна 0px.
Поделитесь пожалуйста как вы инициализировали API карту в Angular2+ ??
Сейчас всё выглядит как так: