SideNav使用角度材料

Question

我正在为角度应用创建sideNav，我正在使用角度材质。我有以下代码，

<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>

我得到的输出是，  

问题是，

  

1）工具栏和侧面导航主要内容都重叠了。

如果我错了，请纠正我。

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 { }

我尝试了相同的代码stackblitz，第一个问题，即工具栏下方的导航抽屉即将到来，但同样在我的本地计算机中无效。

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 { }

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