Angular Material Sidenav 已渲染但未显示

Question

目前我正在使用 Angular 8 和 Angular Material 8 构建自己的博客。

我一直在尝试让我的侧导航工作，但它不配合。 Angular Material 文档说要用 .我已经做到了这一点，但每当我切换它时，它都没有显示

我尝试了以下方法，其中我有一个用于桌面平板电脑的工具栏和一个用于移动设备的侧导航，因为我想要一个响应式网站

<div>
    <mat-toolbar color="primary" class="fixed-header d-flex">
        <mat-toolbar-row>
            <button mat-icon-button (click)="sidenav.toggle()" fxHide.gt-sm>
                <mat-icon *ngIf="!sidenav.opened">menu</mat-icon>
                <mat-icon *ngIf="sidenav.opened">clear</mat-icon>
            </button>
            <div [routerLink]="'/'">
                <img src="assets/logo.svg" alt="img" width="40" height="30" align="top">
                <button mat-button disableRipple class="btn btn-outline-none">
                    <span class="font-xl">title</span>
                </button>
            </div>
            <span class="menu-space"></span>
            <div fxShow="true" fxHide.lt-md>
                <a routerLinkActive="active" [routerLink]="['/menu1']" mat-button>
                    <span [translate]="'Menu1'" class="font-lg"></span>
                </a>
                <a routerLinkActive="active" [routerLink]="['/menu2']" mat-button>
                    <span [translate]="'Menu2'" class="font-lg"></span>
                </a>
                <a routerLinkActive="active" [routerLink]="['/menu3']" mat-button>
                    <span [translate]="'Menu3'" class="font-lg"></span>
                </a>
                <a routerLink="active" [routerLink]="['/menu4']" mat-button>
                    <span [translate]="'menu4'" class="font-lg"></span>
                </a>
            </div>
        </mat-toolbar-row>
    </mat-toolbar>

    <mat-sidenav-container class="flex-grow-1">
        <mat-sidenav #sidenav mode="side" role="navigation" [fixedTopGap]="52">
            <mat-nav-list>
                <a mat-list-item routerLinkActive="active" [routerLink]="['/menu1']">
                    <span [translate]="'Menu1'" class="font-lg"></span>
                </a>
                <a mat-list-item routerLinkActive="active" [routerLink]="['/menu2']">
                    <span [translate]="'Menu2'" class="font-lg"></span>
                </a>
                <a mat-list-item routerLinkActive="active" [routerLink]="['/menu3']">
                    <span [translate]="'Menu3'" class="font-lg"></span>
                </a>
                <a mat-list-item routerLink="active" [routerLink]="['/menu4']">
                    <span [translate]="'Menu4'" class="font-lg"></span>
                </a>
            </mat-nav-list>
        </mat-sidenav>
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>
    </mat-sidenav-container>
</div>

Answer 1

查看您的 stackblitz 项目后:

• 您应该添加<app-layout></app-layout>给您app.component.html因为您正在引导它，并且将成为您项目的入口

• 您应该添加设置 app-layout 的边距归零

• 您应该更改布局组件的结构:

  1. 用 <mat-sidenav-container> 包裹您的整个导航
  2. 移动<mat-toolbar>到<mat-sidenav-content>

  3. 将以下类添加到 layout.component.scss mat-sidenav-container, mat-sidenav-content, mat-sidenav { height: 100%; } mat-sidenav{ display: flex; flex-direction: column; flex: 1 0 auto; width: 200px; }

  4. 换行<router-outlet>与 <main>其中指定了网站的主要内容。

  5. 为主元素添加大约 80 像素的顶部边距，因为您希望有一个固定的工具栏

• 现在让我们修复您的路由。如果您不希望“”导航到主页而是导航到您的主页组件，则应该添加:

  1. 编辑 app-routing.module.ts 中的路由以匹配 { path: '', redirectTo: 'home', pathMatch: 'full', }, { path: '', component: LayoutComponent, children: [ { path: 'home', loadChildren: './home/home.module#HomeModule' } ] } 和

  2. 使用以下内容添加 home.routing.module.ts

` 从'@angular/core'导入{NgModule}； 进口 { 路线， 路由器模块 } 来自 '@angular/router';

import { HomeComponent } from './home.component';

const routes: Routes = [
    {
        path: '',
        component: HomeComponent,
    }
];

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

` 3. 将 HomeRoutingModule 添加到 HomeModule 的导入