Angular动态侧边栏问题：mat-list-item无法完整显示标签

问题说明 #

• 开发需求：点击按钮切换侧边栏状态，展开时显示「图标+完整标签」，收起时仅显示图标；标签内容过长时自动换行
• 当前问题：
  1. mat-list-item 标签内容被截断无法完整显示
  2. 设置固定宽度后侧边栏失去动态尺寸特性

修正后代码实现 #

HTML 模板 #

<mat-sidenav-container autosize class="app-container">
    <mat-sidenav [opened]="true" #sidenav mode="side" 
                 [class.mat-elevation-z4]="true" 
                 class="app-sidenav"
                 [class.expanded]="isExpanded">
        <mat-nav-list>
            <mat-list-item routerLink="#">
                <i class="fa-solid fa-boxes-stacked"></i>
                <span *ngIf="isExpanded">Stock</span>
            </mat-list-item>
            <!-- 测试长标签换行效果 -->
            <mat-list-item routerLink="#">
                <i class="fa-solid fa-truck"></i>
                <span *ngIf="isExpanded">Inventory Management System</span>
            </mat-list-item>
        </mat-nav-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <!-- 侧边栏切换按钮 -->
        <button (click)="isExpanded = !isExpanded" class="toggle-btn">
            <i class="fa-solid {{isExpanded ? 'fa-chevron-left' : 'fa-chevron-right'}}"></i>
        </button>
        <router-outlet>
            <div class="app-sidenav-content">
                Components open here
            </div>
        </router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

CSS 样式 #

.app-container {
  height: 100vh;
  width: 100%;
}

.app-sidenav {
  transition: width 0.3s ease;
  min-width: 60px; /* 收起状态下的最小宽度，适配图标尺寸 */
  background-color: #f5f5f5;
}

.app-sidenav.expanded {
  width: auto; /* 展开时自动适配内容宽度 */
  min-width: 180px; /* 可选：设置最小展开宽度，避免内容过窄时布局错乱 */
}

.mat-nav-list .mat-list-item {
  white-space: normal; /* 允许标签内容自动换行 */
  height: auto; /* 让列表项高度随内容自适应 */
  padding: 10px 16px; /* 调整内边距优化排版 */
  align-items: flex-start; /* 图标与多行标签顶部对齐 */
}

.mat-list-item i {
  flex-shrink: 0; /* 固定图标宽度，避免被压缩 */
  width: 24px;
  margin-top: 2px; /* 微调图标位置，与多行标签对齐更美观 */
}

.mat-list-item span {
  margin-left: 12px; /* 图标与标签间的间距 */
  flex-grow: 1; /* 标签占据剩余空间 */
}

.toggle-btn {
  margin: 16px;
  padding: 8px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

TypeScript 组件逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})
export class SidebarComponent {
  isExpanded = true; // 默认展开侧边栏
}

关键优化点 #

1. 动态宽度控制：通过expanded类切换侧边栏宽度，收起时用最小宽度保证图标显示，展开时自适应内容，配合过渡动画实现平滑切换
2. 标签换行处理：给mat-list-item设置white-space: normal和height: auto，允许长标签自动换行并自适应高度
3. 图标布局稳定性：图标设置flex-shrink: 0固定宽度，避免在收起/展开时被压缩或拉伸
4. 修正属性绑定错误：原代码中opened="isExpanded"未使用属性绑定，改为[opened]="true"保持侧边栏始终打开（如需切换侧边栏显隐可改为[opened]="isExpanded"）

内容的提问来源于stack exchange，提问作者sampineda