angular - 主页上带有嵌套路由器的组件

Question

我的应用程序是单页，其中包含带有内部路由的组件。应用程序具有以下结构：

    <app-header></app-header>
    <app-slider></app-slider>
    <router-outlet></router-outlet> (tabs component with inner routing)
    <app-footer></app-footer>

我想用内部路由器插座制作标签组件。选项卡组件如下所示：

    <div>
        Some menu staff with router links
    </div>
    <router-outlet></router-outlet>

应用路由模块：

    const routes: Routes = [
    {
     path: '',
     component: AppComponent,
     children: [
         {
          path: '',
          component: TabsComponent,
          children: [
              { path: 'nominees', component: NomineesComponent },
              { path: 'vote', component: VoteComponent },
              { path: 'winners', component: WinnersComponent }
          ],
       },
     ],
   },
 ];

在这种情况下，路由器无法按预期工作，因为在每个路由器插座中它都会加载整个页面，并且在浏览器中，我看到主页在主页之后并且仅在找到该选项卡之后。我应该在我的代码中进行哪些更改才能使其正常工作？

标签： angularangular-routing