訪問AngularUI路由器onEnter回調服務

Question

Im使用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回調？

Answer 1

我們可以要求服務作爲PARAM

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

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