У меня есть приложение со следующей структурой
app/
├── app.component.html
├── app.component.scss
├── app.component.ts
├── app.module.ts
├── core/
│ ├── core-routing.module.ts
│ ├── core.module.spec.ts
│ ├── core.module.ts
│ ├── header/
│ ├── layout/
│ ├── services/
│ └── header/
├── someModule1/
├── someModule2/
AppModule
, который занимает корень папки, остается максимально пустым.Его роль заключается в том, чтобы просто загрузить приложение Angular и предоставить корневой уровень router-outlet
.
Все проходит через CoreModule
.Маршруты CoreModule
следующие (forRoot ()):
const routes: Routes = [
{
path: 'app',
component: LayoutComponent,
},
{
path: 'somePath',
loadChildren: '../someModule1/someModule1.module#SomeModule1'
},
{
path: '**', component: NotFoundComponent
}
];
Это позволяет мне создать экземпляр моего LayoutComponent
, в котором содержимое отображается через основной router-outlet
и вторичное имя выхода для другихкомпоненты для отображения.
<header-component></header-component>
<mat-drawer-container>
<mat-drawer #drawer>
<router-outlet name="sidenav"></router-outlet>
</mat-drawer>
<div class="sidenav-content">
<router-outlet></router-outlet>
</div>
</mat-drawer-container>
Я сделал все возможное, чтобы отобразить отдельный контент в области sidenav и main-content безуспешно.
Я ожидаю, что <a [routerLink]="['somepath', { outlets: { sidenav: ['foo'] } }]">Outlet Nav</a>
отобразит somepath
в <router-outlet></router-outlet>
и foo
в <router-outlet name="foo"></router-outlet>
Что я делаю не так?Я читал, что это может быть связано с отложенными модулями