如何在电子自定义标题栏中使用 show/hide maximize/minimize 按钮

Question

到目前为止，我在电子中制作了一个自定义标题栏（使用 angular 9）将这些按钮添加到 html 并分别单击事件以最小化、最大化、恢复或关闭 window.现在，当用户双击标题栏（因为 css 属性设置为 -webkit-app-region: drag）或用户使用 window 对齐功能最大化 window 时，问题就出现了.对于，double click 我想过在angular中使用dblclick事件，但还是失败了。那么，我该如何解决这个问题？

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

titlebar.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 ;
  }
}

Answer 1

所以最后在浏览了整个互联网之后，问题是由区域引起的，因为它运行在 angular 的代码之外。

titlebar.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 中的布尔值。解决这个问题实际上花了一个星期！

如何在电子自定义标题栏中使用 show/hide maximize/minimize 按钮

how to show/hide maximize/minimize button in custom titlebar in electron

html

electron

angular9