Angular Material18 SideNav 自动调整大小不起作用

Question

当我隐藏项目并仅保留图标时，侧边导航的宽度不会自动调整。无论我是否折叠侧导航，它都保持固定宽度。

我已将自动调整大小设置为 true，但什么也没设置。

我使用“@angular/material”：“^18.2.3”和角度18。

HTML 文件：

<mat-sidenav-container autosize="true">
    <mat-sidenav #sidenav mode="side" opened="isExpanded">
        <mat-nav-list>

            <mat-list-item (click)="isExpanded = !isExpanded">
                <mat-icon mat-list-icon class="chevron-button" [ngClass]="{ rotated: isExpanded }">chevron_right</mat-icon>
            </mat-list-item>

            @for (item of menuItems; track $index) {
                <mat-list-item [routerLink]="item.path">
                    <mat-icon matListItemIcon>{{ item.data?.['icon'] || 'default_icon' }}</mat-icon>
                    <span *ngIf="isExpanded" class="menu-item">{{ item.title }}</span>  
                </mat-list-item>
            }
  
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <router-outlet></router-outlet>
    </mat-sidenav-content>
  
</mat-sidenav-container>

TS 文件：

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { routes } from '../../app.routes';
import { RouterModule } from '@angular/router';
import { MatSidenav, MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
import { MatRadioModule } from '@angular/material/radio';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatToolbarModule } from '@angular/material/toolbar';

@Component({
  selector: 'app-side-menu',
  standalone: true,
  imports: [
    CommonModule,
    RouterModule, 
    MatButtonModule, 
    MatRadioModule, 
    FormsModule, 
    ReactiveFormsModule,
    MatSidenavModule, 
    MatIconModule,
    MatListModule,
    MatToolbarModule
  ],
  templateUrl: './side-menu.component.html',
  styleUrl: './side-menu.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SideMenuComponent {

  public menuItems = routes
    .map( route => route.children ?? [] )
    .flat()
    .filter( route => route?.path )
    .filter( route => !route.path?.includes(':') )

  isExpanded: boolean = true;

  constructor() {
  }
}

CSS 文件：

:host {
  display: block;
}

mat-sidenav-container {
  height: 100%;
}

.menu-item {
  margin-left: 8px;
}

.chevron-button {
  transition: 300ms ease-in-out;
  transform: rotate(0deg);
}

.chevron-button.rotated {
  transform: rotate(180deg);
}

Answer 1

autosize 我认为不适用于 Angular Material 3，但不知何故你可以创建一个解决方法。与您分享一些我在从事此工作时遇到的示例。

自动调整侧边尺寸

感谢本文的作者。

希望有帮助！ 干杯！