角度 ui-router，如何使用更新的 url 嵌套状态

Question

我想知道在运行类似向导的设置时如何将三个状态连接在一起。 我目前正在开发的应用程序有一个“参数”屏幕，通过 3 个步骤要求用户输入一些参数。这 3 个步骤应合并在同一页面上，但当前步骤应仅在需要填写特定步骤时才可见。

有点像这样：

用户起始于：parameters/step-1

• 第一个 div 可见
• 第二个 div 被隐藏（或处于某种阻塞/锁定状态）
• 第三个 div 被隐藏（或处于某种阻塞/锁定状态）

用户填写第1步并导航到parameters/step-2

• 第一个 div 可见
• 第二个 div 可见
• 第三个 div 被隐藏（或处于某种阻塞/锁定状态）

用户填写第2步并导航到parameters/step-3

• 第一个 div 可见
• 第二个 div 可见
• 第三个 div 可见

这是我当前的设置，这是正确的做法还是我应该使用嵌套视图，然后根据当前路线手动显示/隐藏每个视图？如果是这样，我该怎么做？

.state('test.parameters', {
  url: "/parameters",
  templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
  url: "/step-1",
  templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
  url: "/step-2",
  templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
  url: "/step-3",
  templateUrl: "views/partials/step3.html"
})

Answer 1

This article on the ng-newsletter website 描述了您的确切示例。也有人评论了这篇文章，并添加了Wizard jsFiddle。我已经调整了文章中的代码以适合您的示例。

要回答这里的问题，您需要将 test.parameters 设置为抽象状态，这意味着您不能直接引用它，但它确实为您提供了 test.parameters 的抽象 url。一旦抽象状态的其中一个子被导航到（由用户或脚本中的一部分），该 url 将更新为抽象状态的 url 并结合子 url（在您的情况下是 [ mainUrl]/参数/test1)。每个 test.parameters.step[x] 状态都是抽象状态的子状态，您可以使用您提到的 templateUrl 中标签中的 sref 元素在它们之间切换。我留下了 $urlRouterProvider 来向您展示如何访问抽象状态的第一步。

$urlRouterProvider.otherwise('/test.parameters/step1');

$stateProvider
.state('test.parameters', {
    abstract: true,
    url: '/parameters',
    templateUrl: "views/partials/enter-parameters.html"
})
.state('test.parameters.step1', {
    url: '/step1',
    templateUrl: "views/partials/step1.html"
})
.state('test.parameters.step2', {
    url: '/step2',
    templateUrl: "views/partials/step2.html"
})
.state('test.parameters.step3', {
    url: '/step3',
    templateUrl: "views/partials/step3.html"
})