Angular 2更新URL路径参数而没有重定向 [英] Angular 2 updating URL path params with no redirect

问题描述

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

Using Angular 2 how do you update the URL Path without redirecting the page.

我知道您可以使用ActivatedRoute queryParamMap Observable访问这些参数，但是如果我想更改这些值并在URL中显示这些值，该怎么办?

I know you can access the params using ActivatedRoute queryParamMap Observable but what if I want to change these values and have those display in the URL.

更新URL中的值可以轻松实现书签功能.

Updating the values in the URL allows for easy bookmark-ability.

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

I don't want to redirect as the query params I am adding are simple data filter I want to store.

推荐答案

在组件构造函数中，将查询参数订阅到您的模型中.

In the component constructor subscribe the query parameter to your model.

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

现在，将一个侦听器功能注册到视图模型，或者将手表添加到您的模型.然后有一个导航功能，您可以在模型更新后立即调用:

Now, register a listener function to the view model, or alternatively add a watch to your model. Then have a navigate function you can call once your model is updated:

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

这篇关于Angular 2更新URL路径参数而没有重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！