使 2 个州共享决心的一部分答案

【问题标题】：Makes 2 states share a part of resolve使 2 个州共享决心的一部分
【发布时间】：2017-12-06 05:01:36
【问题描述】：

我定义了两种状态如下：

app.config(['$stateProvider', function ($stateProvider) {
    $stateProvider
        .state('edit', {
            url: '/edit/{id}',
            templateUrl: '/htmls/h1.html',
            controller: 'SameCtrl',
            onEnter: ...sameOnEnter...
            resolve: {
                ...commonResolve...
            }
        })
        .state('addinEdit', {
            url: '/addin/edit/{id}',
            templateUrl: '/htmls/h2.html',
            controller: 'SameCtrl',
            onEnter: ...sameOnEnter...
            resolve: {
                special: [ ... ],
                ...commonResolve...
            }
        })
}])

所以它们共享同一个控制器，同一个onEnter，并且它们有一个非常长和resolve的共同部分（实际上是一个链解决：first: function (...){...}, second: function (...){...}, ...)。有谁知道如何重写它们，这样我就不必写两次commonResolve？

【问题讨论】：

如果它们很长，那么可以写commonResolve变成私有函数吗？
@tiepnv 你能解释更多吗？我在哪里可以定义这样的私有函数？

标签： javascript angularjs angular-ui-router nested-routes nested-views

【解决方案1】：

我没有 angularjs 经验，但我找到了解决方案，您可以通过 parent 属性指定状态的父级。

app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
    .state('edit', {
        url: '/edit/{id}',
        templateUrl: '/htmls/h1.html',
        controller: 'SameCtrl',
        onEnter: ...sameOnEnter...
        resolve: {
            ...commonResolve...
        }
    })
    .state('addinEdit', {
        url: '/addin/edit/{id}',
        templateUrl: '/htmls/h2.html',
        parent : 'edit'
    })
}])

【讨论】：

我们将 resolve 置于状态 'edit' 和 'addinEdit' 状态继承自 'edit'。

【解决方案2】：

只需为解析器创建一个函数：

    app.config(['$stateProvider', function ($stateProvider) {

        resolverFunction.$inject = ['resolverA', 'resolverB'];
        function ResolverFunction(myService1, myService2) {
            return 'something';
        }

        resolverAFunction.$inject = ['resolverC'];
        function resolverAFunction(resolverC) {
            return 'anything';
        }

        resolverBFunction.$inject = ['resolverC'];
        function resolverBFunction(resolverC) {
            return 'something else';
        }

        resolverCFunction.$inject = ['service'];
        function resolverCFunction(service) {
            return 'something else';
        }


        $stateProvider
            .state('edit', {
                url: '/edit/{id}',
                templateUrl: '/htmls/h1.html',
                controller: 'SameCtrl',
                onEnter: ...sameOnEnter...
                resolve: {
                   commonResolver: resolverFunction,
                       resolverA: resolverAFunction,
                       resolverB: resolverBFunction,
                       resolverC: resolverCFunction,

                }
    })
        .state('addinEdit', {
            url: '/addin/edit/{id}',
            templateUrl: '/htmls/h2.html',
            controller: 'SameCtrl',
            onEnter: ...sameOnEnter...
            resolve: {
               special: [ ... ],
               commonResolver: resolverFunction,
                resolverA: resolverAFunction,
                resolverB: resolverBFunction,
                resolverC: resolverCFunction,

            }
    })
    }])

【讨论】：

抱歉，我不清楚一件事...实际上commonResolver 包含解析器的链（这就是它很长的原因）。它看起来像first: function(...) {...}, second: function(...){...}, ...。有没有办法将所有这些包装在一个函数中？
是的，只需为每个解析器创建函数，然后在需要的地方注入它们。
那么我们不能只为链创建一个函数吗？
如果您只想为链创建一个，您可能需要以父/子的方式创建您的状态，以便将解析器从父级注入到子级。