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>

但问题是我无法加载“个人资料”＆amp; “欢迎”路径在各自的网点，出现在“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>

如何以角度2加载子命名路由

1 个答案: