如何防止角度4中的页面刷新

Question

我想阻止页面刷新到处.

我试过下面的代码

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CommonServices } from '../services/common.service'; 

@Component({
  selector: 'app-review-prescription',
  templateUrl: './review-prescription.component.html',
  styleUrls: ['../../assets/css/prescriptionView.css'],
  providers:[
    CommonServices
  ]
})
export class ReviewPrescriptionComponent implements OnInit {
    constructor(
        private commonServices:CommonServices,
        private router:Router
        ){}
    ngOnInit(){
      window.onbeforeunload = function(event) {
        return 'By refreshing this page you may lost all data.';
      }
  }

}

在尝试这样做ngOnChanges(),ngOnInit(),ngOnDestroy()甚至外面的组件类(对不起不合逻辑),但没有什么工作？

我需要Angular或JavaScript中的解决方案而不是jQuery.

谢谢.

Answer 1

尝试以下订阅,在页面刷新时抛出警报窗口.在尝试刷新或关闭窗口之前,请执行一些用户事件,例如单击页面.检查这里的工作版本

请参阅有关beforeunload的官方文档

ngOnInit() {
    window.addEventListener("beforeunload", function (e) {
        var confirmationMessage = "\o/";
        console.log("cond");
        e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
        return confirmationMessage;              // Gecko, WebKit, Chrome <34
    });
}

Answer 2

@HostListener("window:beforeunload", ["$event"]) unloadHandler(event: Event) {
      event.returnValue = false;
  }

Answer 3

为此，您应该创建一个守卫。

在你的路由配置文件中：

const routes: Routes = [
    {
        path: '',
        redirectTo: '/homePage',
        pathMatch: 'full'
    },
    {
        path: 'accueil',
        component: AccueilComponent,
        canDeactivate: [GuardName]
    }]

通过这样做，您将调用所选组件上的守卫

更多信息在这里

在你的守护下：

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return true/false;
  }
}