主路由器插座内的路由器插座不显示任何内容且没有错误答案

【问题标题】：Router outlet inside primary router outlet doesn't display anything with no errors主路由器插座内的路由器插座不显示任何内容且没有错误
【发布时间】：2020-05-25 21:43:14
【问题描述】：

似乎无法找到问题所在，因为我没有从 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>

routerlink 被正确选择并显示一个活动类，以及一个链接：

http://localhost:4200/dashboard/(sidebar:forms)

但是，当我希望在名为侧边栏的内部路由器插座内看到表单组件时，这里没有显示任何内容，也没有错误

有人知道我在这里缺少什么吗？

谢谢

【问题讨论】：

标签： javascript angular router-outlet

【解决方案1】：

决定将仪表板作为包装器，而不是使用 ng-content 对每个仪表板组件进行包装

<app-header></app-header>

<mat-sidenav-container>
    <mat-sidenav mode="side" opened>
        <mat-nav-list>
            <a mat-list-item [routerLink]="['forms']" routerLinkActive="active">Forms</a>
            <a mat-list-item [routerLink]="['users']" routerLinkActive="active">Users</a>
            <a mat-list-item [routerLink]="['posts']" routerLinkActive="active">Posts</a>
            <a mat-list-item [routerLink]="['pages']" routerLinkActive="active">Pages</a>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <main class="bfa-main">
            <ng-content></ng-content>
        </main>
    </mat-sidenav-content>
</mat-sidenav-container>

<app-footer></app-footer>

【讨论】：