Angular UI Router ui-sref 嵌套

Question

目前正在用 Angular 建立一个在线商店。结构如下

商店页面 - 类别 - 产品

.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 会告诉路由器我想进入子状态并传递 slug 值。

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

但从技术上讲，您不应该在子状态和父状态下都有参数 slug。因为当你想直接导航到子状态时，整个事情都会变得一团糟。

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

所以我建议你在每个 state 上为 slug 参数使用不同的名称，如下所示

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

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

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