Как установить посадочный компонент рекомендуемого модуля по умолчанию через маршрутизатор в angular 2

У меня есть два модуля (clientModule, AdminModule), модуль администратора загружен лениво.

При загрузке страницы загружается клиентский модуль.

Маршруты клиентского модуля

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» при загрузке модуля администрирования.

angular router-outlet
person lpradhap    schedule 31.08.2018    source источник
comment
1. Добавьте {path: '', redirectTo: 'adminPage1', pathMatch: 'full'} в дочерние элементы. 2. Можете ли вы объяснить это более подробно?   -  person wannadream    schedule 01.09.2018

Ответы (1)


arrow_upward
0
arrow_downward

Я смог решить эту проблему, если у кого-то возникла такая же проблема, сработал следующий способ.

Конфигурация маршрута административного модуля

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

    ]
  }
];

добавив пустой путь ( { path: ' ', component: adminPage1Component} ) внутри дочернего массива, загрузив компонент по умолчанию.

кроме того, если у вас есть элемент, который необходимо добавить в класс css при загрузке компонента. бывший:

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

вы можете сделать следующее, чтобы поддержать 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'» к пустому пути.

person lpradhap    schedule 01.09.2018