处理打字稿中的浏览器后退按钮事件

Question

我有一篇文章中的代码。

window.addEventListener('popstate', function (event) {
            // The popstate event is fired each time when the current history entry changes.

            var r = confirm("You pressed a Back button! Are you sure?!");

            if (r == true) {
                // Call Back button programmatically as per user confirmation.
                history.back();
                // Uncomment below line to redirect to the previous page instead.
                // window.location = document.referrer // Note: IE11 is not supporting this.
            } else {
                // Stay on the current page.
                history.pushState(null, null, window.location.pathname);
            }

            history.pushState(null, null, window.location.pathname);

        }, false);

我应该把这段代码放在 angular 2 的组件中吗？上面的代码打字稿兼容吗？到目前为止，当我按下后退按钮时，我无法触发此事件。有没有更好的方法？

Answer 1

在 angular 2 中，你可以使用PlatformLocation它有onPopState监听器。

import { PlatformLocation } from '@angular/common' 

constructor(location: PlatformLocation) {

    location.onPopState(() => {

        var r = confirm("You pressed a Back button! Are you sure?!");

        if (r == true) {
            // Call Back button programmatically as per user confirmation.
            history.back();
            // Uncomment below line to redirect to the previous page instead.
            // window.location = document.referrer // Note: IE11 is not supporting this.
        } else {
            // Stay on the current page.
            history.pushState(null, null, window.location.pathname);
        }

        history.pushState(null, null, window.location.pathname);
    });

}