如何在Angular 2中加載子命名路由

Question

我的路線配置為：

 const routes: Routes = [
      {
        path: '',
        component: WelcomeComponent,
        pathMatch: 'full'
      },
      {path: 'app',pathMatch: 'full',component:MainChatComponent,
        children: [
          {path: '', component: ChatListComponent, outlet: 'leftPanel'},
          {path: 'profile', component: EditProfileComponent, outlet: 'leftPanel', pathMatch: 'full'},

          {path: '', component: ChatComponent, outlet: 'mainPanel'},
          {path: 'welcome', component: WelcomeComponent, outlet: 'mainPanel', pathMatch: 'full'}
        ]
      },
      {path: '404', component: WelcomeComponent,pathMatch: 'full'},
      {path: '**', redirectTo: 'app'}
    ];

MainChatComponent模板是：

<div class="row match-parent margin-0">
  <div class="col-lg-3 left-panel app-panel match-parent padding-0" style="background: #f7f7f7;">
    <router-outlet name="leftPanel"></router-outlet>
  </div>
  <div class="col-lg-9 center-panel app-panel match-parent padding-0">
    <router-outlet name="mainPanel"></router-outlet>
  </div>
</div>

但問題是我無法在其“ app”的子目錄下的各自出口中加載“ profile”和“ welcome”路徑

Answer 1

您不應使用<router-outlets>加載作為布局的組件。

您可以使用下面的選擇器和模板來實現您要嘗試做的事情：

 const routes: Routes = [
      {
        path: '',
        component: WelcomeComponent,
        pathMatch: 'full'
      },
      {path: 'app',pathMatch: 'full',component:MainChatComponent,
        children: [
          {path: 'profile', component: ProfileComponent, pathMatch: 'full'},
          {path: 'welcome', component: WelcomeComponent, outlet: 'mainPanel', pathMatch: 'full'}
        ]
      },
      {path: '404', component: WelcomeComponent,pathMatch: 'full'},
      {path: '**', redirectTo: 'app'}
    ];

profile.component.html

<div class="row match-parent margin-0">
  <div class="col-lg-3 left-panel app-panel match-parent padding-0" style="background: #f7f7f7;">
    <app-chat-list></app-chat-list>
  </div>
  <div class="col-lg-9 center-panel app-panel match-parent padding-0">
    <app-edit-profile></app-edit-profile>
  </div>
</div>

welcome.component.html

<div class="row match-parent margin-0">
  <div class="col-lg-3 left-panel app-panel match-parent padding-0" style="background: #f7f7f7;">
    <app-chat></app-chat>
  </div>
  <div class="col-lg-9 center-panel app-panel match-parent padding-0">
    <app-welcome></app-welcome>
  </div>
</div>

main.component.html

<router-outlet></router-outlet>