Sidenav 栏无法以材质角度正确渲染答案

【问题标题】：Sidenav bar not rendering properly in material angularSidenav 栏无法以材质角度正确渲染
【发布时间】：2017-10-08 17:43:25
【问题描述】：

Sidenav 栏无法以材质角度正确渲染。

菜单并排显示，但我需要一个低于一个。

app.component.html

<mat-sidenav-container fullscreen>
    <mat-sidenav #sidenav mode="push" class="app-sidenav">
      <mat-toolbar color="primary">

        <span class="toolbar-filler"></span>
        <button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="!sidenav.opened">
          <mat-icon aria-label="Menu" class="material-icons">close</mat-icon>
        </button>
      </mat-toolbar>
      <mat-nav-list class="mat-nav-list">
        <a mat-list-item class="sidenav-link"  (click)="sidenav.toggle()">
              <mat-icon mat-list-icon>account_balance</mat-icon>
              <span class="title" mat-line>comp1</span>
              <span mat-line class="secondary">test</span>
        </a>
        <a mat-list-item class="sidenav-link" (click)="sidenav.toggle()">
          <mat-icon mat-list-icon>android</mat-icon>
          <span class="title" mat-line>comp2</span>
          <span mat-line class="secondary">test</span>
        </a>
        <a mat-list-item class="sidenav-link"  (click)="sidenav.toggle()">
          <mat-icon mat-list-icon><i class="material-icons">panorama_wide_angle</i></mat-icon>
          <span class="title" mat-line>fullscreen1</span>
          <span mat-line class="secondary">fullscreen1</span>
        </a>
      </mat-nav-list>
    </mat-sidenav>
    <mat-toolbar id="appToolbar" [ngClass]="{'toolbar-fullscreen': (fullscreen$ | async)}" color="primary">
      <button mat-icon-button (click)="sidenav.toggle()" class="mat-icon-button sidenav-toggle-button" [hidden]="sidenav.opened">
              <mat-icon aria-label="Menu" class="material-icons">menu</mat-icon>
      </button>
      <h1 class="component-title">
        <a class="title-link">{{title}}</a>
      </h1>
      <span class="toolbar-filler"></span>

      <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item>
            <mat-icon>dialpad</mat-icon>
            <span>Redial</span>
          </button>
          <button mat-menu-item disabled>
            <mat-icon>voicemail</mat-icon>
            <span>Check voicemail</span>
          </button>
          <button mat-menu-item>
            <mat-icon>notifications_off</mat-icon>
            <span>Disable alerts</span>
          </button>
        </mat-menu>

    </mat-toolbar>

  </mat-sidenav-container>

截图：

最近 Angular 将 MD 更新为 MAT 我的代码有问题吗？，因为大多数 css 没有呈现默认值

【问题讨论】：

标签： angular angular-material

【解决方案1】：

尝试使用弹性布局 npm install --save @angular/flex-layout。并用 [mat-menu-trigger-for] 替换 matMenuTriggerFor，因为您已更改 md-> mat。示例代码如下所示

<mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav #sidenav fxLayout="column">
      <div fxLayout="column">
        <a href="#" mat-button>example</a>
        <a href="#" mat-button>example</a>
        <a href="#" mat-button>example</a>
      </div>
    </mat-sidenav>
</mat-sidenav-container>

【讨论】：