我正在尝试在模式打开时动态更新视图上的URL /状态，以及在第一次显示视图时自动打开模式。我正在使用1.x版本的UI Router和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直接使用吗？我希望用户能够在打开模式的情况下加载此视图。我不一定需要历史记录支持，因此在打开/关闭模式时，我愿意删除更新URL，但是如果可能的话，我希望保留它。
该修复程序最终变得相对简单，但花了一些时间才能找到答案。我更新了路线，使其看起来像这样
export default function routing ($stateProvider) {
$stateProvider
.state({
name: 'exampleView',
url: '/example/{id}?foo',
component: 'exampleComponent',
params: {
foo: {
dynamic: true
}
}
})
}
dynamic根据docs，将参数设置为可以防止对参数的任何更改触发状态更改。这类似于reloadOnSearch应用于状态声明的属性，但已弃用该属性。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句