Question

我已经为我的商店应用程序定义了状态，但我不确定我是否做得对。由于我在url中有多个可选参数，因此我不确定应该如何实现它。

.state('app.products', {
    abstract: true,
    views: {
        'content@': {
             templateUrl: 'app/products/views/product.html'
         },
         'productHeader@app.products': {
             templateUrl: 'app/products/views/product-header.html'
          }
    }
})

以上是我对产品页面的抽象视图。产品将分为男性/女性和子类别，如：

www.example.com/man/

www.example.com/man/footwear/

www.example.com/man/footwear/shoes

Man，footwear和shoes都是可选的，因为man参数可以是woman，footwear可以是cloth （最后一个参数将是例如shirts）以及上述那些的所有可能组合。

我不确定我是否必须单独制作每个州，或者除了这个之外我还可以再处理一个州吗？

请注意，product header在这里并不重要，如果需要良好的结构来删除它，我当然可以这样做。

我无法在网上找到任何相似内容，因此如果有人有链接也会有所帮助。

Answer 1

我最近通过将每个子类别状态嵌套到其父类别状态来做了类似的事情。这样做的一些好处是，您可以避免在已经在父状态中定义的子状态重复大量代码，并且还必须重新加载已在父状态中加载的数据和视图

这是一个让你入门的例子：

.state('app.products', {
  abstract: true,
  url: '/products',
  views: {...}
})
.state('app.products.gender', {
  url: '/:gender',
  views: {...}
})
.state('app.products.gender.category', {
  url: '/:category',
  views: {...}
})
.state('app.products.gender.category.type', {
  url: '/:type',
  views: {...}
})

首先，网址在子状态中自动堆叠。这意味着你只需要为每个子状态定义一个url参数，你仍然可以获得这样的网址/app/products/:gender/:category/:type。

这样做的第二个好处是，在父状态中定义的视图会自动包含在所有子状态中，除非您明确覆盖它：

.state('app.products.gender.category', {
  url: '/:category',
  views: {
    'foo@someParentState': {templateUrl: 'foo.html'},
    'bar@someParentState': {templateUrl: 'bar.html'}
  }
})
.state('app.products.gender.category.type', {
  url: '/:type',
  views: {
    // foo.html is still rendered here
    // bar.html is replaced by baz.html
    'bar@someParentState': {templateUrl: 'baz.html'}
  }
})

此示例中的另一个好处是，当状态更改为app.products.gender.category.type时， foo.html无法重新加载。例如，假设foo.html在该类别中有一个长滚动列表类型。如果用户单击列表中将状态从app.products.gender.category更改为子状态app.products.gender.category.type的项目，则不会重新加载foo的长滚动列表，并且用户仍然可以看到他们点击的项目。另一方面，如果该单击已将状态更改为非子状态，则可能已重新加载列表（数据和所有），并且用户可能必须滚动才能看到他们单击的项目。

一些建议：

保持嵌套状态名称简短。
只有在层次结构中包含一个状态，如果它是绝对必要的（我正在看你app.products！）。
有很多方法可以解决此问题，因此请务必查看ui-router docs以了解可帮助您减少编码的配置。

Angular ui路由器可选url params

1 个答案: