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 имеет структуру макета.
Проблемы
- Мне нужно загрузить adminModule
adminPage1
как компонент по умолчанию в роутере при загрузке adminModule. - Как пройти через
.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' " к пустому пути.