如何在 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>

但问题是我无法加载 "profile" 和 "welcome" 路径中的 "app"

子项下的各自路径

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>

如何在 angular 2 中加载子命名路由

How to load child named routes in angular 2

javascript

angular2-routing

angular