Question

我正在努力在Angular 2.4.2中的导航期间清除URL参数。我已尝试附加每个选项以清除下面导航线中的参数，或者使用导航或navigateByUrl中的任何混合，但无法弄清楚如何完成。

/section1/page1?key1=abc&key2=def

作为一个例子，我在路线/section/page1并希望保持相同的路线但删除所有的url参数，因此最终结果应为{{1}}

Answer 1

正如DeborahK指出的那样，当我导航到this.router.url时，该URL已经嵌入了url params。为了解决这个问题，我将URL中的params作为字符串剥离，然后使用navigateByUrl跳转到那里。

let url: string = this.router.url.substring(0, this.router.url.indexOf("?"));
this.router.navigateByUrl(url);

Answer 2

如果您将查询参数传递给没有查询参数的网址，则使用navigateByUrl会删除查询参数。

或者你可以试试：

this.router.navigate(this.router.url, { queryParams: {}});

注意：navigate而非navigateByUrl

这有用吗？

Answer 3

如果您不想重新加载页面，也可以使用Location

import { Location } from '@angular/common';
[...]
this.location.replaceState(this.location.path().split('?')[0], '');

this.location.path()为您提供当前路径。您可以通过使用?之前的URL中的所有内容来重置页面路径来删除参数。

Answer 4

使用skipLocationChange选项，它不会显示参数：假设你的网址是

http://localhost/view

现在你的代码中有些东西将查询参数设置为

Q =＆所有放大器; viewtype =总

没有skipLocationChange浏览器中的url（调用导航后）将是：

http://localhost/view?q=all&viewtype=total

使用skipLocationChange：true它仍然是

http://localhost/view

let qp = { q : "all" , viewtype : "total" } 
this.router.navigate(['/view'], {  queryParams: qp },skipLocationChange: true });

Answer 5

您可以在导航附加功能中添加replaceUrl: true。这样，路由器将导航到同一页面，但是您仍然保留了url参数的历史记录状态，同时仍然允许您返回上一条路由。

从文档中

Navigates while replacing the current state in history.

this.router.navigate([], { replaceUrl: true});

Answer 6

这是一个简单的

this.router.navigate([], {});

//或

this.router.navigate([], {
  queryParams: {
   param1:'',
   param2:''
  }
 });

Answer 7

这将清除没有硬编码的 URL，并且不会重新加载页面。

constructor(
        private activatedRoute: ActivatedRoute,
        private router: Router
    )
...
     this.router.navigate([], {
                relativeTo: this.activatedRoute,
                queryParams: {},
                replaceUrl: true,
            });

Answer 8

从7.2角度开始，您可以使用状态

发送

import re
fi = "http://pen.jamstec.go.jp/TKC_/public_html/original/dc/dc_2008/dc_2008_141/dc_2008_141_0706+0900_TKC__y30_u.jpg"
result = re.search(r'http://.*?/(.*?)/',fi)
print(result.group(1))

接收

this.router.navigate(['routename'], { state: { param1: 'bar' } });

这样，您甚至可以从模板发送大型复杂对象。

Angular2，如何清除路由器导航中的URL查询参数

8 个答案: