javascript 如何改变垫图标时sidenav是关闭点击任何地方的身体

mrwjdhj3 于 2023-04-04 发布在 Java

关注(0)|答案(2)|浏览(93)

我有一个sidenav，当点击一个垫子图标时会被切换。我已经添加了垫子图标的变化，当垫子图标被用来切换sidenav。
但我无法改变图标时，sidenav是通过点击任何其他地方的网页主体关闭。我想改变回垫图标回到原来的图标关闭时。
目前的代码，我有改变垫图标点击图标是-

<div fxLayout="row" fxFlex="2%" (click)="snav.toggle();changeIcon();">
  <mat-icon class="IconColor" *ngIf="!menuIconToggle">menu</mat-icon>
  <mat-icon class="IconColor" *ngIf="menuIconToggle">arrow_back</mat-icon>
</div>

在t侧-

changeIcon() {
this.menuIconToggle = !this.menuIconToggle;

}
当sidenav关闭时，任何人都可以通过单击屏幕上的任何其他位置来帮助更改图标。提前感谢。

JavaScript

来源：https://stackoverflow.com/questions/66235739/how-to-change-mat-icon-when-sidenav-is-closed-by-click-anywhere-in-the-body

2条答案

按热度按时间

k4ymrczo1#

如果你使用的是Material Sidenav组件，你可以使用Opened Input属性来检查Sidenav是打开还是关闭

组件.html

<div fxLayout="row" fxFlex="2%" (click)="snav.toggle();changeIcon();">
  <mat-icon class="IconColor" *ngIf="!snav.opened">menu</mat-icon>
  <mat-icon class="IconColor" *ngIf="snav.opened">arrow_back</mat-icon>
</div>

赞(0）回复(0）举报 2023-04-04

sqyvllje2#

**Component.html**

<mat-icon (click)="toggleMenu()" >{{ isMenuOpen ? 'close' : 'menu' }} 
</mat-icon>


**Component.ts**

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
isMenuOpen=false;
ngOnInit(): void {
}
toggleMenu() {
this.isMenuOpen = !this.isMenuOpen;
}
}

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 如何改变垫图标时sidenav是关闭点击任何地方的身体

2条答案

相关问题

热门标签

最新问答