Angular 2 更新 URL 没有重定向的路径参数

Question

使用 Angular 2 如何在不重定向页面的情况下更新 URL 路径。

我知道您可以使用 ActivatedRoute queryParamMap Observable 访问参数，但是如果我想更改这些值并将它们显示在 URL.

中怎么办？

更新 URL 中的值可以轻松添加书签。

我不想重定向，因为我添加的查询参数是我想要存储的简单数据过滤器。

Answer 1

两条不同的路线只有相同的组件

const appRoutes: Routes = [
    { path: 'somepath', component: someComponent }, // yourapp/somepath
    { path: 'anotherpath', component: someComponent }, // yourapp/anotherpath
];

<a class="nav-link" routerLink="/anotherpath" routerLinkActive="active"> change path</a>

Answer 2

在组件构造函数中为您的模型订阅查询参数。

this.route.queryParams.subscribe(params => {
  this.myValue = params['myValue'];
});

现在，向视图模型注册一个侦听器函数，或者向您的模型添加一个监视。然后有一个导航功能，您可以在模型更新后调用：

navigate() {
    this.router.navigate([], {queryParams: { mValue: this.myValue }});
}

Angular 2 更新 URL 没有重定向的路径参数

Angular 2 updating URL path params with no redirect

query-parameters

angular2-routing

angular