时间戳

首页 > 解决方案 > Angular 5 issue with a named outlet children component (reprise)

routes - Angular 5 issue with a named outlet children component (reprise)

问题描述

Thanks a lot for help to mast3rd3mon about my question, but unfortunately with no luck. Perhaps if I upload a schema of what I'm trying to do can clear my problem and specify more precisely what I have in mind.

My HTML code of 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>

And here my routing table:

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}
  ];

Here my hand drawing, circled number are standing to indicate the sequence with which I would like to render things landing on application and after login.

enter image description here

Thanks again.

标签： routescomponentsangular5children

解决方案

推荐阅读