javascript - 在 ui-router 中将可选参数作为父状态

Question

我的 Angular 应用程序中有一些状态，它们都将 myParent 作为父状态:

var myChild1 = {
  name: 'myChild1',
  parent: 'myParent',
  url: '/mychild1'
  ...
};

var myChild2 = {
  name: 'myChild2',
  parent: 'myParent',
  url: '/mychild2'
  ...
};

这是myParent

var myParent = {
  name: 'myParent',
  abstract: true,
  url: '/:username/:password',
  resolve: {
    authorized: [
      myService,
      '$stateParams',
      function (myService, $stateParams) {
        console.log($stateParams);

        myService.doSomething() // unrelated
      }
    ]
  }
};

我想像下面这样访问它:

/mychild1/superman/superpassword

但是，它只让我像这样访问它:

/superman/superpassword/mychild1

如果我采用第二种方式，我就无法将参数设置为可选。我认为我的解决方案在某种意义上并不正确。如何使参数对所有 child 都是可选的？ (我知道我可以在 url 中为每个 child 定义参数，但这不是一个好的做法)

** 顺便说一句，我知道这不是正确的身份验证..这只是我目前使用的一个示例;)

Answer 1

要像 /mychild1/superman/superpassword 一样访问它，您需要在子状态上拥有这两个参数，就像您提到的那样:

var myChild1 = {
  name: 'myChild1',
  parent: 'myParent',
  url: '/mychild1/:username/:password'
  ...
};

如果您不想多次编写该代码(这样您就可以将逻辑保留在一个地方 - 您认为重复代码不是一个好的做法是正确的)，您可以为自己创建一个辅助函数，例如所以:

function generateChildUrl(name) {
  return name + '/:username/:password';
}

var myChild1 = {
  name: 'myChild1',
  parent: 'myParent',
  url: generateChildUrl('/mychild1')
  ...
};