angularjs - 在 UI 路由器中用子 url 覆盖父 url (Angular)

Question

这是我用于 ui-router 的配置:

.state('parent', {
    url: '/child1'
    controller: ParentController,
    abstract: true
})

.state('parent.child1', {
    url: ''
})

.state('parent.child2', {
    url: '/child2'
})

我想要实现什么？

我想要一个/child1 url，我想将其设置为默认值，因此我将父级设置为抽象，并将子级状态 url 设置为“空”。

所以我希望当用户访问 child2 状态时，父 url 被替换而不是附加它。我怎样才能做到这一点？

Answer 1

如果我理解正确，(如果我错了，请纠正我)您正在寻求设置路由服务来实现以下路由:

/ , /child1和/child2并且您希望所有状态都与 ParentController 绑定(bind)

如果这是正确的，您可以通过以下方式实现此目的:

.state('parent', {
  url: '/',
  controller: ParentController,
})

.state('parent.child1', {
  url: '^/child1'
})

.state('parent.child2', {
  url: '^/child2'
})

例如，如果我们运行 https://localhost:3000我们可以这样导航:

parent或/会给我们https://localhost:3000/

parent.child1或/child1会给我们https://localhost:3000/child1

parent.child2或/child2会给我们https://localhost:3000/child2

ParentController 将被所有状态调用。