Angular 侧边栏与页面内容重叠答案

【问题标题】：Angular sidebar overlaps content of pagesAngular 侧边栏与页面内容重叠
【发布时间】：2018-07-02 11:58:42
【问题描述】：

使用 angular cli 创建侧边栏后：

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

侧边栏工作正常，但它与每个页面的内容重叠，如何更改？还是我必须在我正在使用的每一页上写上 margin-left？

【问题讨论】：

请提供Minimal, Complete, and Verifiable example。请看指南how do I ask a good question?
你可以在这里看到一个演示stackblitz.com/angular/…
有点晚了，但是这里。您想在 hook 中调用 sideNav.toggle(true) 函数（组件上的理想函数，例如 ngOnInit）。您可以使用 @ViewChild('sidenav') sideNav 使 sidenav 控件可用于您的组件：MatSidenav;

标签： html css angular angular-material2

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以将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>

【讨论】：

我使用了'side'模式，但它没有并排显示，而是与内容重叠
对我来说，这个问题在第一次调用 drawer.toggle() 后得到修复

【解决方案3】：

router-outlet 必须在容器内（由原理图生成，说“这里的内容”）并将其从 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>

【讨论】：