Question

在创建带有角度cli的侧边栏后：

ng generate @angular/material:material-nav --name=navigation

侧边栏工作正常，但与每个页面的内容重叠，如何更改呢？还是我必须在我正在使用的每个页面上写左空白？

Answer 1

您可以将mat-sidenav mode更改为push或side：

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav 
      #drawer 
      class="sidenav" 
      fixedInViewport="true" 
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      mode="push"    <!-- THIS LINE -->
      >
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Application Title</span>
    </mat-toolbar>
    <h1>TEST</h1>
  </mat-sidenav-content>
</mat-sidenav-container>

Answer 2

'autosize'属性为我修复了它，但根据文档提供了警告：

https://material.angular.io/components/sidenav/api

Answer 3

路由器出口必须位于容器内部（由示意图生成，称“此处为内容”），然后将其从app.component.html中删除

 <mat-sidenav-container class="sidenav-container">
      <mat-sidenav 
          #drawer 
          class="sidenav" 
          fixedInViewport="true" 
          [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
          mode="push"   
          >
        <mat-toolbar color="primary">Menu</mat-toolbar>
        <mat-nav-list>
          <a mat-list-item href="#">Link 1</a>
          <a mat-list-item href="#">Link 2</a>
          <a mat-list-item href="#">Link 3</a>
        </mat-nav-list>
      </mat-sidenav>
      <mat-sidenav-content>
        <mat-toolbar color="primary">
          <button type="button" aria-label="Toggle sidenav" mat-icon-button (click)="drawer.toggle()" *ngIf="isHandset$ | async">
            <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
          </button>
          <span>Application Title</span>
        </mat-toolbar>
       <router-outlet></router-outlet>  <!-- THIS LINE -->
      </mat-sidenav-content>
    </mat-sidenav-container>

角边栏与页面内容重叠

3 个答案: