Angular Material Sidenav 已呈现但未显示

Question

目前我正在用 angular 8 和 angular material 8 构建自己的博客。

我一直在努力让我的 sidenav 工作，但它不合作。 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 代码，我设法让 sidenav 工作。这是我对你的 stackblitz 代码的分支： https://stackblitz.com/edit/angular-5kvkwh

需要执行以下步骤：

在app.component.html中需要用到<app-layout>
在 app-routing.module.ts 中应该显示 home 组件。这需要在您的 <router-outlet>.
在 layout-component.html 中需要几个步骤。主要之一要点是，整个布局应该在 <mat-sidenav-container>以及您申请的主要内容应该在 <mat-sidenav-content>.
对整个页面进行 sidenav 拉伸，一些 css 修改需要（styles.scss、app.component.css、 layout.component.scss).

我建议您为 sidenav、header 和内容组件创建单独的组件。您可以找到此 in my repo on this url.

的示例

Answer 2

查看您的 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. 用<main>包裹<router-outlet>，指定网站的主要内容。
5. 为主要元素添加一个大约 80px 的 margin-top，因为你想要一个固定的工具栏
现在让我们修复您的路由。如果您不希望您的 '' 导航到主页而是导航到您的主页组件，您应该添加 :
1. 在您的应用程序中编辑您的路线-routing.module.ts以匹配 { path: '', redirectTo: 'home', pathMatch: 'full', }, { path: '', component: LayoutComponent, children: [ { path: 'home', loadChildren: './home/home.module#HomeModule' } ] } 和
2. 添加一个家。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

的导入中

Angular Material Sidenav 已呈现但未显示

Angular Material Sidenav rendered but not showing

responsive-design

angular-material

angular

angular8