Question

我有一个父视图和许多子视图。是否可以为孙子这个孩子指定一个状态，但是没有在状态中指定当前的孩子名，怎么样？

所以，在我的配置中，我希望有这样的东西：

.state("parent", {
    url: "" // Resulting url is /
})
.state("parent.child", {
    url: /ChildUrl // Resulting url is /ChildUrl/
})
.state("parent.{some param}.grandchild", {
    url: "" // Resulting url is /ChildUrl/
})

或者如果在没有孙子解决方案的情况下在没有更改URL的情况下更改一个子视图而不更改URL？

Answer 1

在父模板中使用。

<div class="parentTemplate">
  <h1>Parent Title</h1>
  <ui-view></ui-view>
</div>

child1模板：

<div class="child1Template">
  <h1>Child1 Title</h1>
</div>

child2模板：

<div class="child2Template">
  <h1>Child2 Title</h1>
</div>

状态配置：

.state("parent", {
    url: "",
    templateUrl: "templates/parent-template.html"
})
.state("parent.child1", {
    templateUrl: "templates/child1-template.html"
})
.state("parent.child2", {
    templateUrl: "templates/child2-template.html",
    params: { 'child2Param': 'Default' }
})

转到parent.child1或parent.child2将在/但<ui-view>指令将填充相应的子模板。您不需要URL来在状态之间导航。使用导航将$ state注入控制器并使用$state.go('parent.child1')。如果需要传递参数，请在每个状态的params属性中定义它们，并使用$state.go('parent.child2', {'child2Param', someObject.withDynamicValue }.

调用状态更改

Answer 2

所以，最后通过在父视图和子视图的状态配置中删除url参数来解决它，这可以表示为grandchild。它以我需要的方式工作

在ui-router中指定当前没有当前子路由的孙子路由

2 个答案: