angular - SideNav using angular material

Question

I am creating sideNav for angular application and I am using angular material. I have the following code,

<mat-toolbar class="example-header" color="primary">
        <button  mat-button  mat-icon-button><mat-icon>menu</mat-icon></button>
    <span class="company-name">Yaana</span>
</mat-toolbar>
<mat-sidenav-container>
        <mat-sidenav mode="side" opened="true">
            <p><span>Dashboard</span></p>
            <p><span>Incidents</span></p>
            <p><span>Users</span></p>
            </mat-sidenav>
            <mat-sidenav-content>
                Main Content
            </mat-sidenav-content>
</mat-sidenav-container>

The output I am getting is,

The Issues is,

1) Both toolbar and side nav main content are getting overlapped.

Please correct me where I am wrong.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AgmCoreModule } from '@agm/core';
import { MapsAPILoader } from '@agm/core';
import { FormsModule } from '@angular/forms';
import { GoogleMapsAPIWrapper } from '@agm/core';
import { AppComponent } from './app.component';
import 'hammerjs';
import { MatToolbarModule } from '@angular/material/toolbar';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MatIconModule} from '@angular/material/icon';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatButtonModule} from '@angular/material/button';
import {MatListModule} from '@angular/material/list';



@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatButtonModule,
    MatListModule
  ],
exports: [
    MatSidenavModule,
    MatToolbarModule
  ],
  providers: [GoogleMapsAPIWrapper],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have tried the same code stackblitz, the first issue i.e navigation drawer is below toolbar is coming, but the same is not working in my local computer.

https://stackblitz.com/edit/angular-4rjbvu

Answer 1

编辑您的 appModule，使其显示为

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatSidenavModule,
    MatButtonModule,
    MatListModule
  ],
 exports: [
    MatSidenavModule,
    MatToolbarModule,
    ...
 ],
 providers: [GoogleMapsAPIWrapper],
 bootstrap: [AppComponent]
})
export class AppModule { }

添加导出，使这些模块可以被外部组件访问。