Angular Material mat-sidenav-content 未显示

Question

角度材质版本：@angular/material@14.0.2

我是第一次使用 Angular 框架构建 Web 应用程序。 app-routing-module 延迟加载一个仪表板模块，该模块声明所需的组件并导入所需的模块。 仪表板模块导入一个仪表板路由模块，该模块包含以 WrapperComponent 作为父级、侧导航内容作为子级的路由，分成不同的组件。

仪表板-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './components/about/about.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { LoginComponent } from './components/login/login.component';
import { WrapperComponent } from './components/wrapper/wrapper.component';

const routes: Routes = [
{
    path: '',
    component: WrapperComponent,
    children: [
        {
            path: 'dashboard', // --> localhost:4200/dashboard
            component: DashboardComponent,
        },
        {
            path: 'login', // --> localhost:4200/login
            component: LoginComponent,
        },
        {
            path: 'about', // --> localhost:4200/about
            component: AboutComponent,
        }
    ]
},
{
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
}
];

@NgModule({
     imports: [RouterModule.forChild(routes)],
     exports: [RouterModule]
})
export class DashboardRoutingModule { }

wrapper.component.html

<mat-sidenav-container>
<mat-sidenav #sideNav mode="side" opened="opened">
    <app-side-nav>
    </app-side-nav>
</mat-sidenav>
<mat-sidenav-content>
    <router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

app-side-nav 组件由路由器链接组成。

<div class="sidenav">
<div class="logo">
    <a (click)="toggleMenuState()" class="simple-text logo-mini">
        <div class="logo-img">
            <img src="./assets/images/sample_logo.png" alt="logo">
        </div>
    </a>
</div>

<ul class="nav">
    <li class="active nav-list-item"><a routerLink="/default-route"><i class="fa fa-dashboard fa-nav-icon"><span class="nav-item-text">Dashboard</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-group fa-nav-icon"><span class="nav-item-text">Groups</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-line-chart fa-nav-icon"><span class="nav-item-text">Charts</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-book fa-nav-icon"><span class="nav-item-text">Portfolio</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/login"><i class="fa fa-user fa-nav-icon"><span class="nav-item-text">Login</span></i></a></li>
    <li class="nav-list-item"><a routerLink="/some-route"><i class="fa fa-gear fa-nav-icon"><span class="nav-item-text">Settings</span></i></a></li>
</ul>

这似乎工作正常，因为我可以看到根据单击的按钮在 DOM 中加载的相关内容。 但由于某种原因，内容不可见。 这是加载的仪表板组件的屏幕截图。 出于某种原因，它以 1920 像素的边距加载，但即使删除，内容仍然不可见。