如何在不重新加载 ui 视图的情况下更新 $stateParams？角度ui路由器答案

【问题标题】：How can i update $stateParams without reloading the ui-view? angular ui router如何在不重新加载 ui 视图的情况下更新 $stateParams？角度ui路由器
【发布时间】：2020-03-13 19:38:57
【问题描述】：

获取上下文，角度，ui-router，没什么特别的，一个根视图，用 3 个命名的 ui-views 构建。所以在index.html 我们有

<body>
  <div ui-view='left'>
  <div ui-view='center'>
  <div ui-view='right'>
</body>

我的路线看起来像

$stateProvider
 .state('main', {
  url: '/',
  views: {
   'left': {templateUrl: 'foo.html'},
   'center': {templateUrl: 'bar.html'},
   'right': {templateUrl: 'xyz.html'}
  }
 })
 .state('main.b', {
  url: '/b',
  params: { foo: {value: 'bar'} }
  views: { 'right@': {templateUrl: '123.html'} } // I wish to update $stateParams in 'left@' view
 })
 .state('main.c', {
  url: '/c',
  params: ...
  views: { 'left@': ..., 'center@': ..., 'right@': .. }
 });

有没有办法进入 b 状态来更新 'center' 和 'left' 视图中的 $stateParams？我可以使用服务获取它，但我需要将$watch 添加到我需要的变量中，这对我来说看起来有点老套。

进入 c 状态我实际上可以得到我想要的，但是视图被重新加载，我希望避免这种行为，因为我在“左”视图中有一个画布。

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案1】：

您可以使用以下内容转到特定路线而无需重新加载视图：

$state.go('.', {parm1: 1}, {notify: false});

最后一个对象字面量表示您可以传递给go 的选项。如果将notify 设置为false，这实际上会阻止控制器重新初始化。开头的. 是你想去的绝对状态名或相对状态路径。

重要的是notify。

【讨论】：

这在某种程度上仍然会导致视图中的所有组件 $init 然后立即 $destroy，这可能会导致一些严重的性能问题。您可以查看是否在组件中将console.log() 添加到this.$onInit() 和this.$onDestroy()。
Controller 仍然使用这个方法重新实例化，$onInit 被调用。
动态参数是要走的路。

【解决方案2】：

引用@christopherthielen 来自https://github.com/angular-ui/ui-router/issues/1758#issuecomment-205060258：

使用 notify: false 几乎从来都不是一个好主意，现在是已弃用。如果必须，请使用 reloadOnSearch。

你也可以尝试1.0版本的动态参数（目前 1.0.0-alpha.3)。在您的状态下，将参数配置为动态并实现 uiOnParamsChanged 回调：
.state('foo', {
  url: '/:fooId',
  params: { fooId: { dynamic: true } },
  controller: function() {
    this.uiOnParamsChanged = function(changedParams, $transition$) {
      // do something with the changed params
      // you can inspect $transition$ to see the what triggered the dynamic params change.
    }
  }
});

对于演示，看看这个 plunker：http://plnkr.co/edit/T2scUAq0ljnZhPqkIshB?p=preview

【讨论】：

让我措手不及的是，如果您在 stateProvider 定义中定义了 views，请在 views 定义中而不是在外部定义您的 controller 属性。例如。在文档中：ui-router.github.io/docs/latest/interfaces/…views: { header: { controller: function() { this.uiOnParamsChanged = function(changedParams, $transition$) { ... } }, templateUrl: "header.html" }, body: { controller: "bodyCtrl", templateUrl: "body.html" }, footer: "footerComponent" }
同一个 github（在 ChrstopherThielen 评论之前）线程 also discusses the hack/workaround of manually changing $stateParams[key]=value and calling $location.search(key, value)

【解决方案3】：

我认为现在使用“动态参数”是一个更好的解决方案：

当dynamic为真时，参数值的改变不会导致状态进入/退出。不会重新获取解析，也不会重新加载视图。

$stateProvider.state('search', {
   url: '/search?city&startDate&endDate',
   templateUrl: 'some/url/template.html',  
   params: {
      city: {
         value: 'Boston',
         dynamic: true
      }
   }
 }

然后：

$state.go('.', {city: 'London'});

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

【讨论】：

感谢您提供更新的答案，但问题是我们现在如何区分由 $state.go 引起的路由更改与您的示例（动态参数）和使用浏览器后退按钮返回的人?
非常感谢@julien-malige，我找到了“所有没有动态提示”的任何答案，当他们谈到动态时，他们没有例子......你的答案是完整的！谢谢！