Проблема этого кода
{ path: '', redirectTo: 'Page1', pathMatch: 'full'},
{ path: 'Page1', component: Page1Component, outlet="contentOutlet"},
{ path: 'Page2', component: Page2Component, outlet="contentOutlet"}`
является то, что вы не можете загрузить, например, Page1 в именованную розетку, потому что вам нужно загрузить ровно один компонент в неназванный 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>
Так что теперь маршрутизатор распознает, что должен быть выход на / -root Путь вашего приложения, который называется contentOutlet. И он загружает Page1-Компонент в розетку.
Вот исправленный plunker: https://plnkr.co/edit/MXi8p7rr15Bul1US9qbc?p=preview
Его довольно запутанный, вы рекомендуете некоторый учебник или ссылку, чтобы прочитать на это? У меня есть обновление плункера для загрузки меню в левой колонке. Теперь, когда я нажимаю меню Page1child1, я хочу отображать содержимое этой страницы на странице содержания, что мне нужно сделать здесь. Вид на навигацию как на sears.com. 1) Нажмите «Меню» в заголовке, и он обновит подменю слева. . 2) щелкните по подменю слева и загрузите содержимое в правую сторону. –
Эта статья [http://onehungrymind.com/ named-router-outlets-in-angle-2 /) может оказаться очень полезным для входа в именованные маршрутизаторы. –
Спасибо за помощь здесь. Я немного запутался. Кажется, что суть вашего решения состоит в том, чтобы добавить ''/'', то есть изменить' {outlets: {' contentOutlet ':' Page2 '}} 'to''/', {outlets: {' contentOutlet ':' Page2 '}} '. Тем не менее, я открыл ваш плунжер, и он работает в обоих направлениях. Я изучаю [это демо] (https://angular.io/resources/live-examples/router/ts/plnkr.html), в котором маршрут заполняет только названную «всплывающую» розетку. Он работает в демо, но не в [моем его принятии] (https://great-big-angular2-example.herokuapp.com/heroes/crisis-center) в более крупное приложение. –