退出Angular/HTML中的弹出窗口 [英] Exit popup in Angular / HTML

问题描述

当用户关闭或离开页面时如何显示弹出窗口?

How do I show the popup when the user is closing or leaving the page?

当用户将鼠标快速向上移动到试图关闭并离开页面的顶部时，显示弹出窗口.

Show the popup when the user is moving the mouse up fast to the top trying to close and leave the page.

推荐答案

以 SaveUserComponent 为例，尝试如下:

DeactivateGuardService:

DeactivateGuardService :

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
    providedIn: 'root'
})
export class DeactivateGuardService implements  CanDeactivate<CanComponentDeactivate>{

  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

路线:

{ path: 'users/Add', component: SaveUserComponent,canDeactivate: [DeactivateGuardService] },

SaveUserComponent:

SaveUserComponent:

 canDeactivate(): Observable<boolean> | boolean {

    if (this.userForm.dirty) {

      alert('Discard Unsaved Changes?');
    }
    return true;
 }

说明:

添加 canDeactivate:[DeactivateGuardService] 可以在每次您要导航到其他路由或关闭浏览器时路由呼叫 DeactivateGuardService .

Adding canDeactivate: [DeactivateGuardService] to routes calls DeactivateGuardService everytime you want to navigate to some other route or close the browser.

服务调用 component.canDeactivate()，即给定组件的 canDeactivate()函数

The service calls component.canDeactivate() i.e canDeactivate() function of the given component

在这里，您可以编写逻辑，以便在表单脏了或其他任何情况时显示警报.

Here you can write the logic of showing alert if the form is dirty or anything else.

这篇关于退出Angular/HTML中的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！