Не могу понять, в чем здесь проблема, поскольку я не получаю ошибок от Angular.
Я пытаюсь подключить маршрутизатор-розетку внутри основного маршрутизатора-розетки для отображения компонента. Я правильно выбираю роутер, но он не показывает компонент, который я выбрал во второй розетке.
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'dashboard', loadChildren: () => import('./pages/dashboard/dashboard.module').then(m => m.DashboardModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
dashboard-routing.module.ts
// ...
const routes: Routes = [
{ path: '', component: DashboardComponent },
{ path: 'forms', component: FormsComponent, outlet: 'sidebar' },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class DashboardRoutingModule { }
dashboard.component. html
<app-header></app-header>
<mat-sidenav-container>
<mat-sidenav mode="side" opened>
<mat-nav-list>
<a mat-list-item [routerLink]="[{ outlets: { sidebar: ['forms'] } }]" routerLinkActive="active">Forms</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<main class="bfa-main">
<router-outlet name="sidebar"></router-outlet>
</main>
</mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>
Ссылка на маршрутизаторе выбрана правильно и отображает активный класс, а также ссылка:
http://localhost: 4200 / панель инструментов / (боковая панель: формы)
Однако здесь ничего не отображается и ошибок нет , когда я ожидаю увидеть компонент формы внутри внутреннего маршрутизатора с именем sidebar
Кто-нибудь знает, что мне здесь не хватает?
Спасибо