#angular #angular2-routing
#angular #angular2-маршрутизация
Вопрос:
https://plnkr.co/edit/x97F91xLv3yNcOhvTwBm?p=preview
в панели управления выше, в настоящее время нажатие на страницу 1 или Страницу 2 в меню загружает содержимое в безымянный выход маршрутизатора. Как мне загрузить их в именованный выход маршрутизатора (contentOutlet)?
я попытался добавить следующее, но это прерывает страницу
в app.module.ts
{ path: 'Page1', component: Page1Component, outlet:'contentOutlet'},
{ path: 'Page2', component: Page2Component, outlet:'contentOutlet'}
Ответ №1:
Проблема этого кода
{ path: '', redirectTo: 'Page1', pathMatch: 'full'},
{ path: 'Page1', component: Page1Component, outlet="contentOutlet"},
{ path: 'Page2', component: Page2Component, outlet="contentOutlet"}`
заключается в том, что вы не можете загрузить, например, страницу 1 в именованный выход, потому что вам нужно загрузить ровно один компонент в неназванный router-outlet . Этот выход не должен быть пустым. Если вы перенаправляете корневой путь '' непосредственно к компоненту, который хотите загрузить в другой выход, то для неназванного компонента не будет router-outlet доступного компонента.
Итак, вы должны создать родительский компонент для, Pages который всегда загружается в неназванный router-outlet , вот так:
{ path: '', component: PagesComponent, pathMatch: 'full'},
{ path: 'Page1', component: Page1Component, outlet: 'contentOutlet'},
{ path: 'Page2', component: Page2Component, outlet: 'contentOutlet'}
Ваши розетки остаются в AppComponent .
Если вы хотите загрузить Page1 в contentOutlet , вы должны сделать это следующим образом из шаблона AppComponent :
<a [routerLink]="['/', {outlets: {'contentOutlet': 'Page1' }}]" routerLinkActive="active" >Page1</a>
Итак, теперь маршрутизатор распознает, что в / корневом пути вашего приложения должен быть выход с именем contentOutlet . И он загружает Page1 -компонент в розетку.
Вот исправленный плунжер: https://plnkr.co/edit/MXi8p7rr15Bul1US9qbc?p=preview
Комментарии:
1. Это довольно запутанно, вы рекомендуете какой-нибудь учебник или ссылку для чтения по этому поводу? Я обновил плунжер для загрузки меню в левом столбце. Теперь, когда я нажимаю меню Page1child1, я хочу отобразить содержимое этой страницы на странице содержимого, что мне нужно сделать дополнительно здесь. Вроде как нужна навигация, как на sears.com. 1) Нажмите на меню в заголовке, и оно обновит подменю слева 2) нажмите на подменю слева, и оно загрузит содержимое в правую часть
2. Эта статья может быть очень полезной для доступа к именованным выходам маршрутизатора.
3. Спасибо за помощь здесь. Я немного сбит с толку. Похоже, суть вашего решения заключается в добавлении
'/', то есть изменении{outlets: {'contentOutlet': 'Page2' }}на'/', {outlets: {'contentOutlet': 'Page2' }}. Однако я открыл ваш plunk, и он работает в обоих направлениях. Я изучаю эту демонстрацию , в которой маршрут заполняет только именованный «всплывающий» выход. Это работает в демо-версии, но не при моем внедрении этого в более крупное приложение.