AngularJS UI-Router具有相同URL的多个状态

Question

我有一个使用AngularJS和AngularUI路由器ui-router制作的多页表单.每个步骤都有自己的URL(/ step1 - >/step2 - >/step3).在步骤2,表单为用户提供2个选项之间的选择.根据选择的选项,我希望能够将用户发送到两种状态之一,但无论选择哪两种状态,我都希望URL更改为/ step3.

我已经尝试了许多努力来实现这一点,包括将两个替代状态作为另一个的子(如下所示)导致仅显示父(步骤3-a),并且具有抽象父步骤(步骤-3)使用url然后使用两个子步骤(步骤3-a和步骤3-b)并使用onEnter事件和转换进行路由.这两个都无法正确显示内容(后者将用户踢出/ user/userId).

必须有可能在这个庄园中路线,但我似乎无法使它工作.我们将非常感激地提供任何帮助或建议.

谢谢

$stateProvider
    .state('form', {
      abstract: true,
      views: {
        ...
      }
    })
    .state('user-form', {
      url: '/user/:userId',
      parent: 'form',
      abstract: true,
      views: {
        ...
      }
    })
    .state('step-1', {
      parent: 'user-form',
      url: '/step1',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-2', {
      parent: 'user-form',
      url: '/step2',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-a', {
      parent: 'user-form',
      url: '/step3',
      data: {
        ...
      },
      views: {
        ...
      }
    })
    .state('step-3-b', {
      parent: 'step-3-a',
      data: {
        ...
      },
      views: {
        ...
      }
    })

Answer 1

你继承错了.父母和孩子应该是分开的.您的配置应如下所示:

.state('step-3', {
  abstract: true,
  url: '/step3',
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.a', {
  data: {
    ...
  },
  views: {
    ...
  }
})
.state('step-3.b', {
  data: {
    ...
  },
  views: {
    ...
  }
})

这样,两个子状态都将反映其父级的URL.