Question

我有一个角度4的应用程序，有多个路由（ui-router）接受可选参数。

{ name: 'shirts', url:'/shirts/:color/:size, component: ShirtComponent }

这样可行，但我想做的是点击按钮更改一些可选的参数。无需重新加载整个页面。我正在寻找一种方法来更新网址中的参数。

我花了好几个小时寻找解决方案，但是有很多有棱无常的答案，我不会从文档中获得任何明智的信息。

帮助将不胜感激。

Answer 1

尝试使用动态标志声明参数。

根据文件

当dynamic为true时，更改参数值不会导致输入/退出状态。不会重新获取结算，也不会重新加载视图。

https://ui-router.github.io/ng1/docs/latest/interfaces/params.paramdeclaration.html#dynamic

此外，由于您希望参数是可选的，您需要使用值标志声明它们，

指定参数的默认值。这暗示了这一点参数为可选

https://ui-router.github.io/ng1/docs/latest/interfaces/params.paramdeclaration.html#value

总的来说，你的参数应该是

{ 
  name: 'shirts',
  url:'/shirts/:color/:size, 
  component: ShirtComponent,
  params: {
    color: {
      value: null,
      dynamic: true
    },
    size: {
      value: null,
      dynamic: true
    }
  }
}

Answer 2

您可以使用属于Location的{{1}} API go / replaceState方法。他们只会替换浏览器@angular/common而不让路由器了解它。

history

Demo Here

angular - uirouter更新可选参数而无需重新加载

2 个答案: