如何在角度2中通过路由器设置功能模块默认着陆组件 [英] How to set featured module default landing component via router in angular 2

问题描述

我有两个模块(clientModule，AdminModule)，管理模块是延迟加载的.

I have two modules (clientModule, AdminModule), the admin module is lazy loaded.

页面加载时，客户端模块加载.

On page load, the client module loads.

客户端模块路由

const _routes: Routes = [
  {
    path: ':id', component: appComponent, children: [
      { path: 'page1', component: page1Component},
      { path: 'admin', loadChildren:  './admin/admin.module#AdminModule' }
    ]
  }
];

管理模块路由

const _routes: Routes = [
  {
    path: '', component: AdminComponent, children: [
      { path: 'adminPage1', component: adminPage1Component},
      { path: 'adminPage2', component: adminPage2Component},

    ]
  }

];

问题

1. 要求是在管理模块加载时导航到"adminPage1Component"组件.

推荐答案

如果有人遇到相同的问题，我可以通过以下方法解决.

I was able to solve it, if anyone having the same issue, the below way worked.

管理模块路由配置

const _routes: Routes = [
  {
    path: '', component: AdminComponent, children: [
      { path: ' ', component: adminPage1Component},
      { path: 'adminPage1', component: adminPage1Component},
      { path: 'adminPage2', component: adminPage2Component},

    ]
  }
];

通过在子数组中添加一个空路径( {path:''，component:adminPage1Component} )来默认加载组件.

by adding a empty path ( { path: ' ', component: adminPage1Component} ) inside the children array loaded the component by default.

此外，如果有一个元素，则在加载组件时需要在css类中添加元素.例如:

further, if you an have element which need to add in a css class when the component is loaded. ex:

 <li routerLink="adminPage1" routerLinkActive="active">
          Admin Page 1
 </li> 

您可以执行以下操作以支持routerLinkActive

you can do the below to support routerLinkActive

const _routes: Routes = [
  {
    path: '', component: AdminComponent, children: [
      { path: ' ', component: adminPage1Component, redirectTo: 'adminPage1',  pathMatch: 'full'},
      { path: 'adminPage1', component: adminPage1Component},
      { path: 'adminPage2', component: adminPage2Component},

    ]
  }
];

我基本上在空路径中添加了" redirectTo:'adminPage1'，pathMatch:'full'".

I basically added "redirectTo: 'adminPage1', pathMatch: 'full'" to the empty path.

这篇关于如何在角度2中通过路由器设置功能模块默认着陆组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！