How to set featured module default landing component via router in angular 2

问题

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

On page load, the client module loads.

Client module routes

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

Admin module routes

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

    ]
  }

];

Problems

The requirement is to navigate to 'adminPage1Component' component on Admin module load.

回答1:

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

Admin module route configuration

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

    ]
  }
];

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

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>

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},

    ]
  }
];

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

来源：https://stackoverflow.com/questions/52123600/how-to-set-featured-module-default-landing-component-via-router-in-angular-2

标签

angular

router-outlet