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 像素的邊距加載，但即使刪除，內容仍然不可見。