Проблема Angular 5 с именованным дочерним компонентом outlet - PullRequest
Новая
       26

Проблема Angular 5 с именованным дочерним компонентом outlet

0 голосов
/ 24 апреля 2018

Я новичок в Angular 5 и пытаюсь сделать свой первый маршрут.Здесь ситуация.У меня есть app.component в качестве корневого компонента и три других компонента, которые я хотел бы «использовать» с помощью угловой системы маршрутизации, здесь HTML-код: 

<div class="container-fluid">
  <router-outlet></router-outlet>
</div>
<div id="main-content" class="container-fluid">
  <router-outlet name="mainContentOutlet"></router-outlet>
  <!--<app-xsoccer-content></app-xsoccer-content>-->
</div>
<div id="divider" class="container-fluid">
  <div class="footer-divider"></div>
</div>
<div class="container-fluid">
  <app-xsoccer-footer></app-xsoccer-footer>
</div>

А вот моя таблица маршрутизации: 

const appRoutes: Routes = [
    { path: '', component: XsoccerHeaderComponent, children: [
        {path: '', component: BrowserMainMenuComponent},
        {path: 'home', component: BrowserHomeMenuComponent}
    ]},
    { path: '', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [
        {path: '', component: WelcomeContentComponent, outlet: 'mainContentOutlet'},
        {path: 'home', component: HomeContentComponent, outlet: 'mainContentOutlet'},
    ]},
    {path: '**', component: PagenotfoundComponent}
  ];

При запуске приложения компоненты: XsoccerHeaderComponent, BrowserMainMenuComponent, XsoccerContentComponent, WelcomeContentComponent прекрасно загружаются и отображаются.

Но как только я нажимаю кнопку входа,который я поместил как дочерние элементы BrowserMainMenuComponent, я запускаю из него Router.navigate (['home']) после выполнения некоторой логики аутентификации;в результате будет отображаться только BrowserHomeMenuComponent, а HomeContentComponent нет.

Некоторые из вас, ребята, могут оказать любую помощь, пожалуйста.

Большое спасибо.

1 Ответ

0 голосов
/ 24 апреля 2018

На верхнем уровне маршрутов не может быть 2 пустых маршрутов, попробуйте поменять строку { path: '', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [ чем-то вроде { path: 'content', component: XsoccerContentComponent, outlet: 'mainContentOutlet', children: [.Затем назовите это с this.router.navigate(['/content/home'])

...