Angular UI路由器ui-sref嵌套

Question

目前正在建设一个网上商店的角度。结构如下

商店页面 - 分类 - 产品

.state('shop', { 
     url: '/shop' 

.state('shop.category', { 
     url: '/:slug' 

.state('shop.category.product', { 
     url: '/:slug' 

然后我用<a ui-sref=".category({slug: cat.slug})">{{ foo }}</a>从店铺页面链接到分类页面。这工作正常。但是，如何从类别页面链接到产品？

你可以想象我想保持URL看起来像这样

www.site.c@m/shop/dynamic-category/dynamic-product

Answer 1

您应该使用，如.product会告诉路由器，我想要进入子状态&会传递段塞值。

ui-sref=".product({slug: 'some-product'})" 

但在技术上你不应该有两个孩子和家长状态参数slug。因为当你想要直接导航到子状态的时候，整个事情会变得混乱。

像当你做shop.category.product({slug: 'some-cat', slug: 'some-product'})那时你可以有slug属性在相同的json中，javascript将无法正确编译。

所以我会建议你在每个state团状参数有不同的名称，如下面

.state('shop', { 
     url: '/shop' 

.state('shop.category', { 
     url: '/:catslug' 

.state('shop.category.product', { 
     url: '/:productslug'