Làm thế nào để phát hiện sự kiện nhấp vào nút quay lại của trình duyệt bằng cách sử dụng góc?

Có thể phát hiện người dùng đã vào một trang thông qua nút quay lại lịch sử trong trình duyệt của họ không? Tốt hơn là tôi muốn phát hiện hành động này bằng cách sử dụng angle.js.

Tôi không muốn sử dụng định tuyến theo góc. Nó cũng sẽ hoạt động nếu người dùng gửi biểu mẫu và sau khi gửi thành công đến máy chủ và chuyển hướng lại, nó cũng có thể hoạt động nếu người dùng quay lại biểu mẫu bằng nút quay lại của trình duyệt.

Đây là một giải pháp với Angular.

myApp.run(function($rootScope, $route, $location){
   //Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
   //bind in induvidual controllers.

   $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.path();
    });        

   $rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

Tôi đang sử dụng một khối chạy để bắt đầu điều này. Đầu tiên, tôi lưu trữ vị trí thực tế trong $ rootScope.actualLocation, sau đó tôi lắng nghe $ locationChangeSuccess và khi điều đó xảy ra, tôi cập nhật realLocation với giá trị mới.

Trong $ rootScope, tôi theo dõi các thay đổi trong đường dẫn vị trí và nếu vị trí mới bằng với vị trí trước đó là do $ locationChangeSuccess không được kích hoạt, có nghĩa là người dùng đã sử dụng lại lịch sử.

Nếu bạn muốn giải pháp chính xác hơn (phát hiện lùi và chuyển tiếp), tôi đã mở rộng giải pháp do Bertrand cung cấp :

$rootScope.$on('$locationChangeSuccess', function() {
    $rootScope.actualLocation = $location.path();
});


$rootScope.$watch(function () {return $location.path()}, function (newLocation, oldLocation) {

    //true only for onPopState
    if($rootScope.actualLocation === newLocation) {

        var back,
            historyState = $window.history.state;

        back = !!(historyState && historyState.position <= $rootScope.stackPosition);

        if (back) {
            //back button
            $rootScope.stackPosition--;
        } else {
            //forward button
            $rootScope.stackPosition++;
        }

    } else {
        //normal-way change of page (via link click)

        if ($route.current) {

            $window.history.replaceState({
                position: $rootScope.stackPosition
            });

            $rootScope.stackPosition++;

        }

    }

 });

Đối với định tuyến ui, tôi đang sử dụng đoạn mã dưới đây.

Bên trong App.run(), sử dụng

 $rootScope.$on("$stateChangeStart", function (event, toState, toParams, fromState, fromParams) 
 {

    if (toState.name === $rootScope.previousState )
       { 
          // u can any 1 or all of below 3 statements
         event.preventDefault();  // to Disable the event
         $state.go('someDefaultState'); //As some popular banking sites are using 
         alert("Back button Clicked");

       }
 else
      $rootScope.previousState= fromState.name;
   });

Bạn có thể lấy giá trị 'beforeState' trong sự kiện '$ stateChangeSuccess' cũng giống như sau nếu bạn muốn.

    $rootScope.$on("$stateChangeSuccess", function (event, toState, toParams, fromState, fromParams) 
   {

        $rootScope.previousStatus = fromState.name;
    });

Tôi biết đó là một câu hỏi cũ. Dù sao :)

Câu trả lời của Bema trông rất tuyệt. Tuy nhiên, nếu bạn muốn làm cho nó hoạt động với các url 'bình thường' (tôi đoán không có hàm băm), bạn có thể so sánh đường dẫn tuyệt đối, thay vì đường được trả về bởi $location.path():

myApp.run(function($rootScope, $route, $location){
//Bind the `$locationChangeSuccess` event on the rootScope, so that we dont need to 
//bind in induvidual controllers.

    $rootScope.$on('$locationChangeSuccess', function() {
        $rootScope.actualLocation = $location.absUrl();
    });      

    $rootScope.$watch(function () {return $location.absUrl()}, function (newLocation, oldLocation) {
        if($rootScope.actualLocation === newLocation) {
            alert('Why did you use history back?');
        }
    });
});

JavaScript có một đối tượng lịch sử gốc.

window.history

Kiểm tra MDN để biết thêm thông tin; https://developer.mozilla.org/en-US/docs/DOM/window.history?redirectlocale=en-US&redirectslug=window.history

Không chắc nó tốt như thế nào khi hỗ trợ đa trình duyệt tho.

Cập nhật

Có vẻ như những gì tôi đã gọi ở trên chỉ dành cho các trình duyệt kiểu Gecko.

Đối với các trình duyệt khác, hãy thử sử dụng history.js; https://github.com/browserstate/history.js

Vì vậy, tôi đã phiên âm câu trả lời của @Bema thành TypeScript và nó trông như thế này:

namespace MyAwesomeApp {
    // ReSharper disable once Class
    function detectBackButton(
        $rootScope: ng.IRootScopeService,
        $location: ng.ILocationService
    ) {
        let actualLocation: string = '';

        $rootScope.$on('$locationChangeSuccess',
            () => {
                actualLocation = $location.path();
            });

        $rootScope.$watch(() => $location.path(),
            (newLocation: string, oldLocation: string) => {
                if (actualLocation === newLocation) {
                    //$rootScope.$broadcast('onBackButtonPressed', null);
                }
            });
    }

    detectBackButton.$inject = [
        '$rootScope',
        '$location'
    ];

    angular
        .module('app')
        .run(detectBackButton);
}

Chúng tôi không phải tạo thuộc tính ngoài $rootScopedịch vụ, chúng tôi có thể có mã 'khi thay đổi vị trí thành công' và mã 'thay đổi vị trí' của chúng tôi đều đóng trên actualLocationbiến cục bộ. Từ đó, bạn có thể làm bất cứ điều gì bạn thích, giống như trong mã gốc. Về phần mình, tôi sẽ cân nhắc việc phát sóng một sự kiện để những người điều khiển riêng lẻ có thể làm bất cứ điều gì họ phải làm, nhưng bạn có thể bao gồm các hành động toàn cầu nếu bạn phải làm .

Cảm ơn vì câu trả lời tuyệt vời và tôi hy vọng điều này sẽ giúp ích cho những người dùng trình đánh chữ khác.

Solutio của tôi cho vấn đề này là

app.run(function($rootScope, $location) {
    $rootScope.$on('$locationChangeSuccess', function() {
        if($rootScope.previousLocation == $location.path()) {
            console.log("Back Button Pressed");
        }
        $rootScope.previousLocation = $rootScope.actualLocation;
        $rootScope.actualLocation = $location.path();
    });
});

khi nhấn nút quay lại, góc chỉ kích hoạt sự kiện $ routeChangeStart , $ locationChangeStart không kích hoạt.