Angular Material 14升级至15后<mat-list-item>中spacer失效如何恢复？

Angular 15升级后，Angular Material对mat-list-item的默认布局实现做了调整，改用flexbox布局，导致原来依赖自定义spacer标签实现的名称左对齐、按钮右对齐效果失效。可以通过以下几种方法恢复该布局：

方法一：调整自定义spacer的CSS样式 #

保持原有HTML结构不变，给.spacer类添加flex布局适配样式：

.spacer {
  flex: 1 1 auto;
}

由于mat-list-item现在是flex容器，该样式会让spacer自动填充名称与按钮之间的剩余空间，实现两端对齐。

方法二：使用Angular Material内置的mat-spacer类 #

替换自定义的span.spacer为Angular Material提供的mat-spacer组件，无需额外编写CSS：

<mat-nav-list class="programs">
    <mat-list-item *ngFor="let dataObject of filteredPrograms" (click)="selectProgram(dataObject)">
        {{dataObject.programName}}
        <div class="mat-spacer"></div>
        <button mat-icon-button (click)="deleteProgram(dataObject); $event.stopPropagation()">
            <mat-icon>delete</mat-icon>
        </button>
    </mat-list-item>
</mat-nav-list>

mat-spacer类内置了flex: 1 1 auto样式，完美适配flex布局下的空间填充需求。

方法三：直接通过flex布局属性实现两端对齐 #

无需额外的spacer元素，给mat-list-item添加flex布局样式，利用justify-content实现左右对齐：

mat-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

修改后的HTML结构更简洁：

<mat-nav-list class="programs">
    <mat-list-item *ngFor="let dataObject of filteredPrograms" (click)="selectProgram(dataObject)">
        {{dataObject.programName}}
        <button mat-icon-button (click)="deleteProgram(dataObject); $event.stopPropagation()">
            <mat-icon>delete</mat-icon>
        </button>
    </mat-list-item>
</mat-nav-list>

justify-content: space-between会自动将子元素分别对齐容器的左右两端，达成预期布局效果。

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