html - 如何在电子的自定义标题栏中显示/隐藏最大化/最小化按钮
问题描述
到目前为止,我在电子中制作了一个自定义标题栏(使用 Angular 9),将这些按钮分别添加到 html 和单击事件中,以最小化、最大化、恢复或关闭窗口。现在,当用户双击标题栏(因为 css 属性设置为-webkit-app-region: drag
)或用户使用窗口捕捉功能最大化窗口时,就会出现问题。对于,双击我想在角度使用 dblclick 事件但仍然失败。那么,我该如何解决这个问题呢?
标题栏.component.html
<div class="titlebar" *ngIf="showTitleBar" (dblclick)="dblFunction()">
<div class="navigation">
<a class="normal-button material-icons" *ngIf="showBackButton">arrow_back</a>
<div class="appTitle">{{title}}</div>
</div>
<div class="wincontrol">
<a class="normal-button material-icons" (click)="minimize()">remove</a>
<a class="normal-button material-icons" *ngIf="showMaxButton ; else showResButton" (click)="maximize()">crop_square</a>
<ng-template #showResButton>
<a class="normal-button material-icons" id="restore" (click)="restore()">flip_to_front</a>
</ng-template>
<a class="close-button material-icons" (click)="close()">clear</a>
</div>
</div>
标题栏.component.ts
import { Component, OnInit } from '@angular/core';
import { WindowService } from 'src/app/services/window.service';
import { ElectronhelperService } from 'src/app/services/electronhelper.service';
@Component({
selector: 'app-titlebar',
templateUrl: './titlebar.component.html',
styleUrls: ['./titlebar.component.scss']
})
export class TitlebarComponent implements OnInit {
title = 'Electron-App' ;
showMaxButton ;
showTitleBar = true ;
showBackButton = false ;
constructor(private win: WindowService, private helper: ElectronhelperService){
this.showMaxButton = !this.win.winSettings.wasMaximized ;
}
ngOnInit(): void {
}
minimize(){
this.win.sendMinimize() ;
}
maximize(){
this.showMaxButton = !this.showMaxButton ;
this.win.sendMaximize() ;
}
restore(){
this.showMaxButton = !this.showMaxButton ;
this.win.sendRestore() ;
}
close(){
this.win.sendClose() ;
}
dblFunction(){
console.log('dbl clicked')
this.showMaxButton = !this.showMaxButton ;
}
}
解决方案
所以最后在浏览了整个互联网之后,由于区域在角度代码之外运行而导致问题。
标题栏.component.ts
import { Component, OnInit, NgZone } from '@angular/core';
import { WindowService } from 'src/app/services/window.service';
import { ElectronhelperService } from 'src/app/services/electronhelper.service';
@Component({
selector: 'app-titlebar',
templateUrl: './titlebar.component.html',
styleUrls: ['./titlebar.component.scss']
})
export class TitlebarComponent implements OnInit {
title = 'Electron-App' ;
showMaxButton ;
showTitleBar = true ;
showBackButton = false ;
constructor(private win: WindowService, private helper: ElectronhelperService, private zone: NgZone){
this.showMaxButton = !this.win.winSettings.wasMaximized ;
this.helper.win.on('maximize', this.toggleMaxButton.bind(this)) ;
this.helper.win.on('unmaximize', this.toggleMaxButton.bind(this)) ;
}
ngOnInit(): void {
}
minimize(){
this.helper.win.minimize() ;
}
maximize(){
this.helper.win.maximize() ;
}
restore(){
this.helper.win.unmaximize() ;
}
close(){
this.helper.win.close() ;
}
toggleMaxButton(){
this.zone.runTask(() => {
if (this.helper.win.isMaximized()){
this.showMaxButton = false ;
}
else{
this.showMaxButton = true ;
}
console.log(this.showMaxButton)
}) ;
}
}
因为,win.on
事件是异步的,所以需要 ngZone 来切换 angular 内的布尔值。从字面上看,解决这个问题花了一周的时间!
推荐阅读
- excel - 如何在 Excel 工作表中添加 HTML Web 浏览器窗口
- python - TypeError:字符串索引必须是整数,而不是当我加入列表中的项目时
- ldap - 如何通过Softerra从LDAP中获取与其对象类相关的所有属性?
- mysql - 根据排名打印每年的前 5 个剪辑
- interpolation - 有限指数增长插值算法
- typo3 - TYPO3 9.5:带有语言设置“所有语言”(-1) 的 tt_content 在默认语言下不起作用
- android - 使用适用于 Android 的 Google Maps SDK 检测地理点是否位于折线内
- android - 如何从 Arraylist 在 whatsapp 中添加贴纸
- javascript - 在覆盖 div 中完成第一次单击时触发双击
- python - 保存在管理日志中时,Django unicode 转换卡住了?