0

预期行为

我有一个包含一个表单的页面，当用户想要离开这个页面时，实际上它只是一个组件，我想显示一些警报，比如“你真的要离开这个页面吗？你的更改将不会被保存”。

当前行为

我努力了

@HostListener('window:beforeunload', ['$event']) yourfunction($event) {
  return $event.returnValue='Your changes will not be saved';
}

但是对话没有出现。

任何想法或建议都将受到欢迎。

4

2 回答 2

1

这是因为在 Angular 中，页面之间的转换不是“真实的”，并且 window.beforeunload 事件不会触发。为了管理这个，你必须使用 Angular 自己的 Router Guards，特别是canDeactivate一个。这是有关守卫的特定文档的链接。canDeactivate您的实际代码可能如下所示：

@Injectable()
class DeactivateGuard implements CanDeactivate<YourComponent> {
    canDeactivate(){
//your popup logic goes here. Note that this method should return 
// a boolean, or a Promise/Observable of a boolean, if any async operations are present
   }
}

创建此守卫后，您只需将其放在您的路由定义中：

{path: 'path-to-your-component', component: YourComponent, canDeactivate: [DeactivateGuard]}
于 2018-07-16T09:07:04.843 回答
0

您可以使用我在
以下示例中的应用程序中使用的 canDeactivate

     @Injectable()
export class RouteLinkGuard implements CanDeactivate<Componentchanged> {
  constructor(private router: Router, private confirmationService: ConfirmationService, private commonService: CommonService) {}

  canDeactivate(Componentchanged: Componentchanged) {
// Here you can use whatever logic you want 
    if (this.commonService.getChangedValue() === true) {
      return Observable.create((observer: Observer<boolean>) => {
        this.confirmationService.confirm({
          message: 'Are you sure you want to leave this page? Any unsaved data would be lost?',
          header: 'Not saved',
          icon: 'fa fa-info',
          accept: () => {
            observer.next(true);
            observer.complete();
          },
          reject: () => {
            observer.next(false);
            observer.complete();
          }
        });
      });
    } else {
      return true;
    }
  }
}

//In Module
// You is like below
const routes: Routes = [
  {
    path: '',
    component: Componentchanged,
    canDeactivate: [RouteLinkGuard]
  }
];
于 2018-07-16T09:20:27.117 回答