Javascript 角度2：当用户关闭浏览器选项卡时，打开自定义模式弹出窗口并锁定选项卡关闭

我面临着一件非常奇怪的事情。在Angular 2 web应用程序中，当用户关闭浏览器选项卡或浏览器本身时，我需要显示一个自定义模式弹出窗口，建议用户留下或离开（顺便向我的API发送一些操作）。事实上，在用户做出选择之前，我需要锁定选项卡关闭

下面的代码允许检测选项卡关闭，然后打开模式弹出窗口，但不会阻止选项卡关闭

有人遇到过同样的问题吗？提前感谢您的帮助

来自app.component.ts

@HostListener('window:beforeunload', ['$event'])
private beforeUnloadHander(event) {
     this.translate.get('WINDOW.title').subscribe(
        value => {
            this.modalTitle = value
        });
     this.componentChild = {
        component: ModalCloseWindowComponent,
        inputs: {}
     };
};

从app.component.html：

  <main>
    <router-outlet></router-outlet>
    <modal [title]="modalTitle" [componentChild]="componentChild" (onClose)="close(event)"></modal>
</main>

来自modalCloseWindow.component.html

<form class="form cf">
    <div class="form-item">
        <p>{{ 'WINDOW.stopEnregistrement' | translate }} </p>
        <p>{{ 'WINDOW.infoStopEnregistrement' | translate }} </p>
    </div>
    <div class="form-actions cf">
        <button type="button" class="btn btn-cancel" (click)="hide()">{{ 'WINDOW.rester' | translate }} </button> &nbsp;
        <button type="button" class="btn btn-primary" (click)="quitter()">{{ 'WINDOW.quitter' | translate }} </button>
    </div>
</form>

{{'WINDOW.stopenregistration'| translate}}

{{'WINDOW.infostopenregistrment'| translate}}

{{'WINDOW.rester'| translate}}
{{'WINDOW.quitter'| translate}}

<div class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
     [ngStyle]="{'display': visible ? 'block' : 'none'}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>{{ title }}</h4>
            </div>
            <div class="modal-body">
                <div #theBody></div>
            </div>
        </div>
    </div>
</div>
<div class="modal-backdrop fade" [ngClass]="{'in': visibleAnimate}"
     [ngStyle]="{'display': visible ? 'block' : 'none'}"></div>

import { Component, Input, Output, EventEmitter, AfterViewInit, ElementRef  } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { TranslateService } from 'ng2-translate';

@Component({
    selector: 'modal-close-window',
    templateUrl: './modalCloseWindow.component.html'
})

export class ModalCloseWindowComponent {

    @Output() public onClose = new EventEmitter();
    @Output() public close = new EventEmitter();

    constructor(private translateService: TranslateService,
        public fb: FormBuilder) {
    }

    public hide(): void {
        this.close.emit(false);
    }

    public quitter(): void {
        this.onClose.emit(true);
    }
}

<form class="form cf">
    <div class="form-item">
        <p>{{ 'WINDOW.stopEnregistrement' | translate }} </p>
        <p>{{ 'WINDOW.infoStopEnregistrement' | translate }} </p>
    </div>
    <div class="form-actions cf">
        <button type="button" class="btn btn-cancel" (click)="hide()">{{ 'WINDOW.rester' | translate }} </button> &nbsp;
        <button type="button" class="btn btn-primary" (click)="quitter()">{{ 'WINDOW.quitter' | translate }} </button>
    </div>
</form>