javascript - Angular UI Router - 具有空 Url 的抽象父状态

Question

我试图在我的应用程序中设置多个嵌套状态。这是相关代码。

function configFn($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise("/cart");
        $stateProvider
            .state('checkout', {
                url: '/',
                templateUrl: 'app/checkout/views/checkout.container.html',
                controller: 'checkoutCntrl',
                abstract: true
            })
                .state('checkout.cart', {
                    data: { step: 1 },
                    url: '/cart',
                    views: {
                        "styles": {
                            templateUrl: 'app/checkout/views/checkout.styles.html',
                            controller: 'checkoutStylesCntrl'
                        },
                        "cart": {
                            templateUrl: 'app/checkout/views/checkout.cart.html',
                            controller: 'cartCntrl'
                        }
                    }
                })
                //.other states

    }

我面临的问题是状态和状态转换没有发生。
因此，如果我在#/之后打开我的页面时什么也没有，那么我什么也看不到。

如果我将 //cart 放在 url 中，应用程序可以正常工作，这似乎合乎逻辑，因为 //cart 可能意味着第一个 / 用于状态checkout 和 /cart 在第一个 / 之后用于状态 checkout.cart。

但问题是我希望状态 checkout.cart 加载到 url /cart 而不是 //cart

Answer 1

解决方案非常简单。

当您使用抽象状态时。不要给它一个 URL。

        .state('checkout', {
            templateUrl: 'app/checkout/views/checkout.container.html',
            controller: 'checkoutCntrl',
            abstract: true
        })

这应该可以解决问题。