角度材质 SideNav 自动调整大小不起作用

Question

我正在使用 Angular Material 构建一个侧导航，可以在单击菜单时隐藏导航文本。我遵循https://material.angular.io/components/sidenav/overview 在 mat-sidenav-container 上使用 autosize

但 sidenav 仍然覆盖 mat-sidenav-content 部分，并且不会自动调整内容部分的大小

我使用“@angular/material”：“^8.0.2”

html

<mat-sidenav-container class="example-container" autosize>
  <mat-sidenav #sidenav class="example-sidenav" mode="side" opened="true">

    <mat-nav-list>
      <mat-list-item>
        <button mat-icon-button (click)="isExpanded = !isExpanded">
          <mat-icon *ngIf="!isExpanded">chevron_right</mat-icon>
          <mat-icon *ngIf="isExpanded">chevron_left</mat-icon>
        </button>
      </mat-list-item>
      <mat-list-item>
       <mat-icon mat-list-icon>home</mat-icon>
         <p matLine *ngIf="isExpanded">Home</p>
      </mat-list-item>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>

    Main content 

</mat-sidenav-content>

</mat-sidenav-container>

.ts 文件

import {Component} from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

@Component({
  selector: 'sidenav-autosize-example',
  templateUrl: 'sidenav-autosize-example.html',
  styleUrls: ['sidenav-autosize-example.css'],
})
export class SidenavAutosizeExample {
  isExpanded = false;
}

CSS

.example-container {
  width: 100%;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  padding: 10px;
  height: 100%;
}

Answer 1

您可以通过添加autosize="true"轻松解决此问题

例子：

<mat-sidenav-container autosize="true">

Answer 2

• 没有必要使用autoSize。
• 添加属性[style.left]="sidenav.opened ? '.25%' : '0'"到mat-sidenav-content.
• 没有必要在 上使用opened属性mat-sidenav。
• 将属性[fixedInViewport]="false"与 一起使用mat-sidenav。