Angular中如何判断mat-sidenav开闭状态以切换对应mat-icon图标

MatSidenav 实例自带 opened 布尔属性，会实时返回侧边栏的开闭状态，你之前的判断逻辑直接引用了sidenav对象本身，只要组件实例存在就会判定为真，自然没法实现状态切换。

最简修改方案 #

直接修改按钮部分的判断逻辑，调用sidenav.opened属性即可：

<button mat-icon-button (click)="sidenav.toggle()">
   <mat-icon>{{sidenav?.opened ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}}</mat-icon>
</button>

如果要保留你原来的*ngIf写法，修改为如下即可生效：

<button mat-icon-button (click)="sidenav.toggle()">
   <mat-icon *ngIf="sidenav.opened">keyboard_arrow_left</mat-icon>
   <mat-icon *ngIf="!sidenav.opened">keyboard_arrow_right</mat-icon>
</button>

代码里加?.可选链操作符是为了避免组件初始化阶段sidenav还未被@ViewChild获取到时出现空引用报错，如果你用的是Angular 16+版本或者确认初始化时序没问题，也可以去掉，直接写sidenav.opened。

可选扩展方案 #

如果你需要在多个地方用到侧边栏的开闭状态，也可以用双向绑定独立维护状态，不需要依赖ViewChild获取实例：

1. 给sidenav添加opened双向绑定

<mat-sidenav appResponsiveMenu mode="side" [(opened)]="isSidenavOpened">
        my menu items list
</mat-sidenav>

2. ts文件中新增状态变量

isSidenavOpened = true;

3. 修改按钮逻辑，直接操作自定义变量

<button mat-icon-button (click)="isSidenavOpened = !isSidenavOpened">
   <mat-icon>{{isSidenavOpened ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}}</mat-icon>
</button>

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