我正在使用Angular 1.5.6,正在使用AngularUI路由器(https://github.com/angular-ui/ui-router)。我有不同的路线,例如客户和用户。在每个类别中都有不同的“子根”,例如一个用于列表,一个用于edt。我在这里设置客户路线:

import customerListModule from './list/customer.list';
import customerServiceModule from './services/customer.service';
...
...

function customerModule($stateProvider, $urlRouterProvider) {
    'ngInject';

    $urlRouterProvider
        .when('/customer', ['$state', function($state) {
            $state.go('customer.list.tracked');
        }]);

    $stateProvider
        .state('customer', {
            parent: 'root',
            url: '/customer',
            abstract: true,
            views: {
                'root@app': {
                    template: '<div class="customer" ui-view=""></div>'
                }
            },
            onEnter: () => {
                // in here I want to change my customer servce
            },
        })
        .state('customer.list', {
            url: '',
            views: {
                '@customer': {
                    template: '<customer></customer>'
                }
            },
            breadcrumbs: {
                name: 'customer.breadcrumbs.list'
            },
            params: {
                saving: false
            }
        })
        .state('customer.edit', {
            parent: 'customer.list',
            url: '/:id/edit',
            views: {
                '@customer': {
                    template: editTemplate(),
                    controller: manageCustomerCtrl,
                    controllerAs: 'manageCustomerVM'
                }
            },
            breadcrumbs: {
                name: 'customer.breadcrumbs.edit'
            },
            resolve: {
                isAuthorized: 'readWriteAccess'
            },
            bodyClass: 'product-form'
        });
}

export default angular.module('customerAdminUI.customer', [
        'ui.bootstrap',
        'ui.router',
        customerListModule.name,
        customerServiceModule.name,
        ...
        ...
    ])
    .config(customerModule);


我有一个客户服务,要在客户状态的onEnter回调中访问。我试图将其注入到customerModule方法中,以便可以在onEnter()回调中使用它:

function customerModule($stateProvider, $urlRouterProvider, CustomerService) {

    ...
    ...


    $stateProvider
        .state('customer', {
            parent: 'root',
            url: '/customer',
            abstract: true,
            views: {
                'root@app': {
                    template: '<div class="customer" ui-view=""></div>'
                }
            },
            onEnter: () => {
                CustomerService.clearSearch();
            },
        })


但是我得到了错误:

Unknown provider: CustomerService


如何在onEnter回调中使用服务?

最佳答案

我们可以要求提供服务作为参数

// not ready for minification
onEnter: function(CustomerService) {
   CustomerService.dowhatneeded...
},

// preferred way
onEnter: ['CustomerService', function(service) {
   service.dowhatneeded...
}],

关于javascript - 在Angular UI Router onEnter回调中访问服务,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40281702/

10-12 07:06