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

【问题标题】：Specify current grandchild route without current child route in ui-router在 ui-router 中指定没有当前子路由的当前孙子路由
【发布时间】：2015-12-03 17:25:14
【问题描述】：

我有一个父视图和多个子视图。是否可以为孙子中的一个指定状态，但没有在状态中指定当前子名以及如何指定？

所以，在我的配置中，我想要这样的东西：

.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/
})

或者如何在没有孙解决方案的情况下在浏览器中更改一个子视图而不更改另一个子视图？

【问题讨论】：

标签： angularjs angular-ui-router

【解决方案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 }. 调用状态更改

【讨论】：

问题是我需要用一个孩子改变 url，而不是用另一个孩子改变它，并保留前一个孩子的 url。这就是为什么我在考虑孙子，但我不知道如何正确指定它。我也在使用$state.go
如果您将 url 添加到一个状态而不是另一个状态，它不起作用吗？它将进入状态，然后相应地更改 window.location。或者，转到 url 并相应地加载子状态。
感谢您的回答，我的问题已解决。我已经发布了答案

【解决方案2】：

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

【讨论】：