Angular Routes устанавливает компонент по умолчанию для роутера-розетки при загрузке нового модуля

У меня есть два модуля (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},

    ]
  }

];

Компонент admin имеет структуру макета.

Проблемы

  1. Мне нужно загрузить adminModule adminPage1 как компонент по умолчанию в роутере при загрузке adminModule.
  2. Как пройти через .ts файл внутри adminModule?

1 ответ

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

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

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' " к пустому пути.

Другие вопросы по тегам