如何在不调用控制器上的 $onInit 的情况下使用 ui-router 更新路由

Question

我正在尝试在模式打开时动态更新视图上的 URL/state，以及在首次显示视图时处理自动打开模式。我正在使用 1.x 版本的 UI 路由器和 AnguarJS 组件。我运行遇到的问题是当我更新状态时， $onInit() 被触发；换句话说，打开模态会导致打开第二个模态。

以下是我处理更改状态的方式：

showModal() {
  const modal = this.$uibModal.open({
    component: 'viewModal',
    size: 'lg'
  })
  const resetState = () => {
    console.log('resetting state ...')
    this.$state.go('.', {
      id: this.$state.params.id
    }, {
      inherit: false,
      notify: false,
      reload: false,
      location: 'replace'
    })
  }
  modal.opened.then(() => {
    console.log('opening ...')
    this.$state.go('.', {
      foo: 'bar'
    }, {
      notify: false,
      reload: false,
      location: 'replace'
    })
  })
  // The 'catch' is due to the promise being rejected with 'backdrop click'
  // when clicking on the background, though it doesn't always work, but
  // that's another issue entirely
  modal.closed.then(resetState).catch(resetState)
}

这是相关的 $onInit() 代码

if (this.$state.params.foo) {
  this.showModal()
}

路线如下

export default function routing ($stateProvider) {
  $stateProvider
    .state({
      name: 'exampleView',
      url: '/example/{id}?foo',
      component: 'exampleComponent'
    })
}

我原以为将 reload 和 notify 设置为 false 会阻止重新加载视图，但事实并非如此。有没有更好的方法在不触发$onInit的情况下更新状态？我应该直接使用 window.location 吗？我希望用户能够在打开模式的情况下加载此视图。我不一定需要历史记录支持，所以我愿意在 opening/closing 模态时删除更新 URL，但如果可能的话我更愿意保留它。

Answer 1

最终修复相对简单，但需要一段时间才能找到。我将路由更新为如下所示

export default function routing ($stateProvider) {
  $stateProvider
    .state({
      name: 'exampleView',
      url: '/example/{id}?foo',
      component: 'exampleComponent',
      params: {
        foo: {
          dynamic: true
        }
      }
    })
}

根据 docs，将参数设置为 dynamic 将防止对参数的任何更改触发状态更改。这类似于应用于状态声明的 reloadOnSearch 属性，但属性已弃用。

如何在不调用控制器上的 $onInit 的情况下使用 ui-router 更新路由

How to update route with ui-router without calling $onInit on controller

angularjs

angular-ui-router

angular-components