如何检查垫边在角度上是否打开或关闭?

Question

我试图改变垫子图标的图标取决于关闭或打开垫子sidenav，但无法找到如果sidenav是打开或关闭下面是我的代码

<mat-sidenav appResponsiveMenu mode="side" opened>
my menu items list
</mat-sidenav>

这里是切换按钮

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

。ts代码

@ViewChild(MatSidenav)
sidenav!: MatSidenav;

Answer 1

mat-sidenav组件已打开输入属性，我们可以使用该属性来检查sidenav是否打开

<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>

Answer 2

https://material.angular.io/components/sidenav/overview#opening-and-closing-a-sidenav

From the docs:

可以使用open()、close()和toggle()方法打开或关闭垫子。这些方法中的每一个都返回一个Promise，当sidenav完成打开时将被解析为true，当sidenav完成关闭时将被解析为false。

打开状态也可以通过在模板中使用打开属性的属性绑定来设置。该属性支持双向绑定。

这是一个你需要的所有代码的stackblitz:

https://stackblitz.com/angular/xxbbxnybjov?file=src%2Fapp%2Fsidenav-open-close-example.ts

在这个stackblitz中，他们使用后一种方法绑定到组件的open属性。open属性是一个布尔值，控制是打开(true)还是关闭(false)。

或者，如果你更喜欢前一种方法(似乎你目前正在使用)，那么只需执行:

@ViewChild(MatSidenav)
sidenav!: MatSidenav;
sidenavIsOpen = false
openSideNav() {
this.sidenav.open().then((sidenavIsOpen: boolean) => {
this.sidenavIsOpen = sidenavIsOpen 
})
}
closeSideNav() {
this.sidenav.close().then((sidenavIsOpen: boolean) => {
this.sidenavIsOpen = sidenavIsOpen 
})
}
toggleSideNav() {
this.sidenav.toggle().then((sidenavIsOpen: boolean) => {
this.sidenavIsOpen = sidenavIsOpen 
})
}

你的html看起来像这样:

<button mat-icon-button (click)="toggleSideNav()">
<mat-icon *ngIf="sidenavIsOpen">keyboard_arrow_left</mat-icon>
<mat-icon *ngIf="!sidenavIsOpen">keyboard_arrow_right</mat-icon>
</button>