При разработке своего приложения Angular вы сталкиваетесь со сценарием, когда вы держите свои вкладки в розетке маршрутизатора. Теперь вы хотите загрузить содержимое этих вкладок, используя маршруты, когда выбрана конкретная вкладка. Но если вы направите этот маршрут к основной розетке маршрутизатора, ваши вкладки станут невидимыми. Это одна из тех ситуаций, когда требуются вложенные розетки маршрутизатора.
Итак, сначала давайте попробуем это с одним маршрутизатором-розеткой, чтобы понять, о чем мы говорим.
- Давайте добавим роутер в наш app.component.html.
2. И иметь конфигурацию маршрута для отображения нашей приборной панели с вкладками.
3. Как правило, мы будем располагать селекторы компонентов содержимого вкладок на панели инструментов и показывать их в соответствии с выбранной вкладкой. Итак, это будет наш dashboard.component.html.
4. Он работает и дает нам результат, как показано ниже.
4. Но теперь предположим, что я хочу, чтобы tab1 и tab2 загружались на основе URL-адреса, не сохраняя их селекторы в dashboard.component.html. Потому что в случае большого приложения у нас может быть много вкладок и их содержимого. Итак, давайте изменим нашу конфигурацию маршрута и dashboard.component.html.
Это должно сработать, правда? Посмотрим, что мы получим.
5. Хм ... Наши URL-адреса меняются, но наш компонент не загружается. Ой, подождите, давайте немного изменим нашу маршрутизацию и настройку.
Обратите внимание, как мы переместили компонент Dashboard в дочерние маршруты. Посмотрим на результат.
Эй, где сейчас мои вкладки. Странно, правда ?. Итак, давайте обсудим, как мы достигаем того, чего мы пытаемся достичь, с помощью конфигурации маршрута, упомянутой в пункте №4.
6. На помощь приходит Вложенные розетки маршрутизатора. Давайте посмотрим на нашу конфигурацию маршрутизации, которая была у нас в пункте 4.
В этой конфигурации наши URL-адреса менялись, но наши компоненты не отображались, но почему ?.
Наша конфигурация маршрута представляет иерархию, как только мы определили маршруты наших компонентов Tab1 и Tab2 как дочерние маршруты маршрута панели мониторинга. И когда мы определили Dashboard Component как компонент на маршруте панели инструментов. Затем дочерние маршруты будут пытаться найти роутер-выход в компоненте Dashboard.
Итак, давайте добавим еще один роутер-выход в наш dashboard.component.html для этой конфигурации маршрута.
Теперь посмотрим на результат
Оно работает!!. Давайте также создадим модель DOM в Dev Tools, чтобы убедиться, что оба наших роутера работают.
Могут быть различные сценарии, в которых вы можете извлечь выгоду из вложенных маршрутизаторов-розеток. Подумайте, если вы хотите лениво загружать содержимое этих вкладок при выборе вкладок, верно?
Главное, что нужно иметь в виду, это то, что каждый маршрут при поиске соответствующего роутера-выхода будет смотреть на родительский маршрут. Если родительскому маршруту назначен компонент, то компонент этого родительского маршрута должен иметь выход маршрутизатора. Если родительскому пути не назначен компонент, он переместится дальше вверх по иерархии и выберет ближайший маршрутизатор-выход.
Для маршрутов без родителя и ближайшей розетки маршрутизатора. роутер-выход внутри app.component.html будет использоваться. Как только вы сможете представить себе конфигурацию маршрута в виде дерева. Вложенные розетки маршрутизатора становятся легкой прогулкой.
