AngularJS:如何清除URL中的查询参数?

angularjs angular

110455 观看

16回复

我的AngularJS应用程序需要访问用户的LinkedIn个人资料。为了做到这一点,我需要将用户重定向到包含回调redirect_uri参数的LinkedIn URL,该参数将告诉LinkedIn将用户重定向回我的webapp并在URL中包含“代码”查询参数。这是传统的Oauth 2.0流程。

一切都很好,除了LinkedIn将用户重定向回以下URL:

http://localhost:8080/?code=XXX&state=YYY#/users/123/providers/LinkedIn/social-sites

我想?code=XXX&state=YYY从URL中删除,以使其干净。用户不需要查看我从LinkedIn重定向收到的查询参数。

我尝试过$location.absUrl($location.path() + $location.hash()).replace(),但它会在URL中保留查询参数。

我也无法使用提取查询参数,例如“代码” ($location.search()).code。好像有吗?在上面的URL#之前欺骗Angular。

作者: alecswan 的来源 发布者: 2019 年 6 月 12 日

回应 (16)


146

我用

$location.search('key', null)

因为这不仅会删除我的密钥,还会将其从URL上的可见性中删除。

作者: Julius 发布者: 22.08.2014 01:22

104

决定

我最终得到了AngularJS论坛的答案。有关详情,请参阅此主题


该链接指向Google网上论坛帖子,该帖子难以阅读且无法提供明确答案。要删除URL参数,请使用

$location.url($location.path());
作者: alecswan 发布者: 03.07.2013 11:34

63

要删除所有查询参数,请执行:

$location.search({});

要删除一个特定的查询参数,请执行:

$location.search('myQueryParam', null);
作者: Rahul Desai 发布者: 13.01.2016 06:32

29

要清除项目,请将其删除并调用$$撰写

    if ($location.$$search.yourKey) {
        delete $location.$$search.yourKey;
        $location.$$compose();
    }

派生自angularjs源:https//github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

作者: basarat 发布者: 31.01.2014 04:55

27

您可以使用以下命令删除特定查询参数:

delete $location.$$search.nameOfParameter;

或者,您可以通过将搜索设置为空对象来清除所有查询参数:

$location.$$search = {};
作者: Quintin 发布者: 06.10.2013 08:24

26

在撰写本文时,正如之前提到的@Bosh,html5mode必须是true为了能够设置$location.search()并将其反映回窗口的可视URL。

有关详细信息,请参阅https://github.com/angular/angular.js/issues/1521

但是,如果 html5mode 是,true您可以轻松地清除URL的查询字符串:

$location.search('');

要么

$location.search({});

这也将改变窗口的可视URL。

(经测试,在AngularJS版本1.3.0-rc.1html5Mode(true)。)

作者: Fredric 发布者: 13.10.2014 08:46

12

html5mode= 时需要使它工作false

所有其他的答案只有工作的时候角的html5modetrue。如果你在外面工作html5mode,那么$location只提到你的哈希中的“假”位置 - 因此$location.search无法查看/编辑/修复实际页面的搜索参数。

这是一个解决方法,角度加载之前插入页面的HTML中:

<script>
  if (window.location.search.match("code=")){
    var newHash = "/after-auth" + window.location.search;
    if (window.history.replaceState){
      window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
    }
    window.location.hash = newHash;
  }
</script>
作者: Bosh 发布者: 09.06.2014 09:26

5

只是用

$location.url();

代替

$location.path();
作者: kevinius 发布者: 20.12.2015 04:09

3

如果要移动到另一个URL并清除查询参数,只需使用:

$location.path('/my/path').search({});
作者: luizfelippe 发布者: 23.08.2017 08:45

1

如果您正在使用路由参数,请清除$ routeParams

$routeParams= null;
作者: Oswaldo Alvarez 发布者: 22.10.2014 04:06

0

如何将位置哈希设置为null

$location.hash(null);
作者: Bwyss 发布者: 24.04.2015 02:59

0

如果您立即处理参数然后移至下一页,则可以在新位置的末尾添加问号。

例如,如果你要做$ location.path('/ nextPage');

你可以这样做:$ location.path('/ nextPage?');

作者: user5487176 发布者: 25.10.2015 10:50

0

我已经尝试了上述答案,但无法让他们工作。唯一对我有用的代码是$window.location.search = ''

作者: Gwen Au 发布者: 09.02.2016 12:49

0

我可以用这一行替换所有查询参数:$location.search({});
易于理解和简单的方法来清除它们。

作者: Lucas Reppe Welander 发布者: 28.06.2016 08:39

0

接受的答案对我有用,但我需要深入挖掘以解决后退按钮的问题。

我注意到的是,如果我使用链接到页面<a ui-sref="page({x: 1})">,然后使用删除查询字符串$location.search('x', null),我的浏览器历史记录中没有额外的条目,所以后退按钮将我带回到我开始的位置。虽然我觉得这是错误的,因为我认为Angular不会自动为我删除这个历史记录条目,这实际上是我特定用例所需的行为。

问题是,如果我使用链接的页面<a href="/page/?x=1">,而不是,然后取出查询字符串以同样的方式,我得到我的浏览器历史上的一个额外名额,所以我必须单击后退按钮两次,回到我开始。这是不一致的行为,但实际上这似乎更正确。

我可以href通过使用轻松解决链接问题$location.search('x', null).replace(),但是当你通过ui-sref链接登陆它时会打破页面,所以这不好。

经过大量的摆弄,这是我提出的解决方案:

在我的应用程序的run功能中,我添加了这个:

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

然后我使用此代码删除查询字符串参数:

$location.search('x', null);

if ($location.path() === $rootScope.locationPath) {
    $location.replace();
}
作者: Moo 发布者: 11.11.2016 01:28

0

对于Angular> 2,您可以将null传递给要清除的所有参数

this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})
作者: Fateh Mohamed 发布者: 11.06.2019 02:41
32x32