Question

在我的应用程序中，我想在用户点击后退按钮时显示提示消息框或模态。我能够使用onPopState事件，但它不会阻止用户向后导航。到目前为止，我有这个：

    window.onpopstate = (event) => 
      event.preventDefault();
      this.modal.showModal();
    };

Answer 1

Angular 2/4提供了一种方法来做同样的事情。解决方案是canDeactivate。

canDeactivate 是一个路由属性，可以添加到其组件包含后退按钮的路由中。

canDeactivate后卫将服务作为输入。该服务实现 canDeactivate 接口（@ angular / router）。

{
path: "<some path>", component: BackButtonComponent, canDeactivate:[nameOfService]
}

如果只有此服务返回true，则允许用户返回。

进一步阅读：https://angular.io/guide/router#candeactivate-handling-unsaved-changes

Answer 2

您应该使用路线保护，而不是使用窗口对象。在路由配置中，您应该添加CanDeactivate防护。 Follow this guide，它与您想要完成的任务非常相似。

Answer 3

以下是我在应用中的表现方式。

在模块中导入angular的'Location'API。

Error: PostsControllerTest#test_should_destroy_post:
ActiveRecord::InvalidForeignKey: SQLite3::ConstraintException: FOREIGN
 KEY constraint failed: DELETE FROM "posts" WHERE "posts"."id" = ?
     app/controllers/posts_controller.rb:57:in `destroy'
     test/controllers/posts_controller_test.rb:43:in `block (2 levels) in <class:PostsControllerTest>'
     test/controllers/posts_controller_test.rb:42:in `block in <class:PostsControllerTest>'


bin/rails test test/controllers/posts_controller_test.rb:41

....

Finished in 12.539965s, 1.1164 runs/s, 1.2759 assertions/s. 14 runs,
16 assertions, 0 failures, 1 errors, 0 skips`

将其添加到提供者列表

import { Location, LocationStrategy, PathLocationStrategy } from '@angular/common';

注意 - 如果您不是手动重写URL，则可能不需要“PathLocatioStrategy”部分。

然后在您的根组件或单件服务中再次导入位置...

providers: [ Location, {provide: LocationStrategy, useClass: PathLocationStrategy},  ... ]

将其注入构造函数

import { Location } from '@angular/common';

然后订阅'back'PopStateEvent。

constructor (private location: Location) {  ....

如果您正在使用Angular路由器或使用Angular Location API和路径重写的任何其他路由器，则可能会阻止此工作。我没有使用Angular路由器，但我猜它可能有一个处理PopStateEvents的方法。

Angular - 如何取消从“后退”按钮触发的路径更改？

3 个答案: