javascript - AngularJs 在重定向到新位置时更改后退按钮位置

Question

在我们的商店中，用户选择产品 (/shop/products)，然后重定向到第一个自定义页面 (/shop/details)。他进行了一些定制并单击“下一步”。在我们的 Controller (productDetailsController) 中，我们使用选定的属性创建一个新对象 (Order)，并重定向到该订单所在的下一页 (shop/individualization?orderId=2)进一步定制。每当用户现在使用浏览器后退按钮时，我们都希望通过参数使该订单可用于上一页。因此，我们需要更改后退按钮指向的 url(/shop/details?orderId=2 而不是 /shop/details)。

<小时/>

简而言之:

/shop/products -nextButton- /shop/details -nextButton- shop/个性化？orderId=2

shop/individualization?orderId=2 -BROWSER-BACK- /shop/details?orderId=2

<小时/>

如果我只是在 Controller 内使用$location.replace()，它将从shop/individualization?orderId=2返回按钮到产品选择/商店/产品。

如果我在一个摘要周期内执行两个 $location.path() ，它将忽略第一个:

          // inside the order creation promise...
          var search = {orderId: createdOrder.id};
          $location.path("/shop/details").search(search); 
          $location.path("/shop/individualization").search(search); 

从 /shop/products 导航到 /shop/details 时，我无法使用 replace()，因为使用了后退按钮仍然需要导航到 /shop/products。

有什么建议吗？

谢谢!

Answer 1

概述可能的解决方案:

• 服务会跟踪订单(可能只是 orderId，具体取决于您的具体用例)
• shop/individualization(或导航到 shop/individualization 的 shop/details 操作)设置 orderId 在服务中
• shop/individualization 和 shop/details 均定义 reloadOnSearch: false

• shop/individualization 和 shop/details 都将 URL 搜索参数绑定(bind)到服务； Controller 逻辑可以是:

  app.controller("XXX", function($scope, orderService, $location) {
      // initialization
      var orderId = $location.search("orderId");
      if( orderId ) {
          orderService.setOrderId(orderId); // setOrderId() could handle loading the order too
      }
      else {
          orderId = orderService.getOrderId();
          // reloadOnSearch is false, so this doesn't trigger a navigation
          if( orderId ) $location.search("orderId",orderId);
      }
  
      // ...rest of controller logic
  });
  

请记住:

1. 您所做的操作使 shop/details 可加入书签，以便用户可以随时返回查看旧订单。系统应该准备好处理这种情况，例如从服务器重新加载订单。如果不需要添加书签，事情就会变得简单:只需使用该服务并完全删除搜索参数即可。

2. 您有时可能还想从 orderService 中删除订单对象。