Sidenav条在材质角度下无法正确渲染

Question

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>

截图：

最近角度更新的MD到MAT对我的代码有问题吗？因为大多数css都没有渲染默认值

Answer 1

尝试使用flex布局 npm install --save @ angular / flex-layout 。 并使用[mat-menu-trigger-for]替换matMenuTriggerFor，因为你已经改变了md-＆gt;垫。 示例代码将如下所示

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