4

在 Angular 视图之间链接时，是否有一种简单的方法来保留查询参数？

当我使用 ngHref 时，查询参数会丢失：

<a ng-href='OtherPage'>Other page</a>

我从这个 url 导航http://localhost/Page.html#/?stat=77698382到这个： http://localhost/Page.html#/OtherPage。

此解决方案有效，但它需要一个具有显式重定向的函数：

<a ng-click='redirectToOtherPage()'>Other page</a> 

$scope.redirectToOrderListPage = function() {
    $location.path('OtherPage');
};

有没有更声明的方式来做到这一点？

4

4 回答 4

3

这两者略有不同。我认为您正在寻找的代码是：

<a ng-href='#/OtherPage'>Other page</a>

http://localhost/Page.html#/?stat=77698382似乎关闭了。

您需要将查询字符串放在哈希标记之前，如下所示：

http://localhost/Page.html?stat=77698382#/

然后，当您在应用程序中导航时，不会替换 queryString。

于 2013-09-06T12:23:41.010 回答
2

我面临着类似的问题。我必须跨多个视图维护查询字符串。而且，我还必须在维护查询字符串的同时检查 $$hash。就我而言，我应该只在投资组合视图中移动 $$hash 值。我希望这有帮助。

var onRouteChangeOff = $scope.$on('$locationChangeStart', routeChange);
function routeChange(event, newUrl, oldUrl) {
  onRouteChangeOff();
  if (oldUrl.indexOf('?') >= 0) {
    var queryString =  oldUrl.split('?')[1];
    queryString = queryString.split('#')[0];
    newUrl = $location.$$path + '?' + queryString;
    if($location.$$path === '/portfolio')
    {
      newUrl += '#' + $location.$$hash
    }
    $location.url(newUrl);
  }
  event.preventDefault();
  return;
}

如果您只想在没有任何 $$hash 值的视图中维护查询字符串，那么下面的代码就可以了。

var onRouteChangeOff = $scope.$on('$locationChangeStart', routeChange);
function routeChange(event, newUrl, oldUrl) {
  onRouteChangeOff();
  if (oldUrl.indexOf('?') >= 0) {
    var queryString =  oldUrl.split('?')[1];        
    newUrl = $location.$$path + '?' + queryString;        
    $location.url(newUrl);
  }
  event.preventDefault();
  return;
}
于 2015-06-18T20:12:23.697 回答
1

这是 TypeScript Angular 1 中的一些示例代码。它解析旧的查询参数并将它们合并到新的参数中。（基于 Pankaj 的回答。）

  $rootScope.$on('$locationChangeStart', (event:IAngularEvent, newUrl:string, oldUrl:string) => {

    let oldPath = oldUrl.replace(/^([^?#])+/, '$1');
    if (oldUrl.indexOf('?') >= 0 && oldPath !== $location.path()) {
      let queryString =  oldUrl.split('?')[1];
      if (queryString.indexOf('#') >= 0) {
        queryString = queryString.split('#')[0];
      }

      let oldParamStrings:string[] = queryString.split('&');
      let oldParams:{[key:string]:string} = {};
      oldParamStrings.forEach((oldParamString:string) => {
        let keyValue:string[] = oldParamString.split('=');
        oldParams[decodeURIComponent(keyValue[0])] = decodeURIComponent(keyValue[1]);
      });

      let newParams = $location.search();
      if (!angular.equals(newParams, oldParams)) {
        angular.merge(newParams, oldParams);
        $location.search(newParams);
        return;
      }
    }

    // ANY OTHER CODE
    //////
  });
于 2017-04-19T18:56:35.510 回答
-1

我目前将$location服务附加到范围并使用 ng-click 进行导航，例如ng-click="$location.path('/target')".

任何查询参数都不会被替换。

于 2015-02-01T11:45:55.713 回答