Question

目前，我正在使用角度8和角度材料8建立自己的博客。

我一直在努力使我的sidenav正常工作，但是没有合作。 Angular Material文档说要打包。我已经做到了，但是每当我切换它时，它都不会显示

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

<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，标题和内容组件创建单独的组件。您可以找到此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. 用<router-outlet>包装<main>，以指定网站的主要内容。
5. 要为主要元素添加80px左右的边距，因为要使用固定的工具栏
现在让我们修复您的路由。如果您不希望''导航到home而是导航到home组件，则应添加：
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的导入中

角材料Sidenav呈现但未显示

2 个答案: