javascript - 无法调用uiCanExit- Angular ui路由器1.0.0 beta

我在components/app/app-routes.js中有以下路由文件：

export default
function AppRoutes($stateProvider, $urlRouterProvider, $transitionsProvider) {
  'ngInject';

  // reference: https://ui-router.github.io/guide/ng1/migrate-to-1_0#lazy-resolves
  const defaultResolvePolicy = {
    when: 'EAGER'
  };

  const STATES = [{
    name: 'logout',
    url: '/logout?applicationName&desktopName&sn',
  }, {
    name: 'base',
    url: '',
    abstract: true,
    template: '<ui-view></ui-view>'
  }, {
    name: 'app',
    parent: 'base',
    abstract: true,
    component: 'wireApp',
    data: {
      authRequired: true
    },
    resolvePolicy: defaultResolvePolicy,
    resolve: {
      labels(LabelService) {
        'ngInject';
        return LabelService.fetch();
      },
      settings(SettingsService) {
        'ngInject';
        return SettingsService.fetch();
      },
    }
  }, {
    name: '404',
    url: '/404',
    parent: 'base',
    template: '<w-404></w-404>',
    resolvePolicy: defaultResolvePolicy,
    resolve: {
      module($q, $ocLazyLoad) {
        'ngInject';

        return $q((resolve) => {
          require.ensure([], (require) => {
            let mod = require('pages/404');
            $ocLazyLoad.load({
              name: mod.name
            });
            resolve(mod.name);
          }, '404');
        });
      },
    }
  }, {
    name: 'dashboard',
    parent: 'app',
    url: '/dashboard',
    data: {
      authRequired: true
    },
    views: {
      'content@app': {
        template: '<w-dashboard priority-tasks="$resolve.priorityTasks"></w-dashboard>'
      },
    },
    resolvePolicy: {
      module: defaultResolvePolicy,
      priorityTasks: {
        when: 'LAZY'
      },
    },
    resolve: {
      priorityTasks($http, $q, CacheFactory, CustomerService, RuntimeConfig, PermissionService) {
        'ngInject';

        if (!CacheFactory.get('priorityTasks')) {
          CacheFactory.createCache('priorityTasks', {
            storageMode: 'sessionStorage',
            storagePrefix: 'w'
          });
        }

        const priorityTasksCache = CacheFactory.get('priorityTasks');

        if (PermissionService.check('PRIORITY_TASKS', 'view')) {
          return $http.get(`${RuntimeConfig.DEV_API_URL}/customer/${CustomerService.model.currentCustomer.id}/priority-tasks`, {
            cache: priorityTasksCache
          }).then(({
            data
          }) => data, () => $q.resolve([]));
        }
        return [];
      },
      module($q, $ocLazyLoad) {
        'ngInject';

        return $q((resolve) => {
          require.ensure([], (require) => {
            let mod = require('pages/dashboard');
            $ocLazyLoad.load({
              name: mod.name
            });
            resolve(mod.name);
          }, 'dashboard');
        });
      }
    }
  }, {
    name: 'loans',
    parent: 'app',
    url: '/loans',
    data: {
      authRequired: true
    },
    views: {
      'content@app': {
        template: '<w-loans></w-loans>',
      },
    },
    resolvePolicy: defaultResolvePolicy,
    resolve: {
      security($q, $state) {
        'ngInject';
        //irl get this from a service.
        console.log($transitionsProvider, "TRANSISIONS PROVIDER FROM ROUTE");
        // let permissions = false;
        // if (!permissions) {
        //   return $q.reject("No permissions");
        // }
      },
      module($q, $ocLazyLoad) {
        'ngInject';
        return $q((resolve) => {
          require.ensure([], (require) => {
            let mod = require('pages/loans');
            $ocLazyLoad.load({
              name: mod.name
            });
            resolve(mod.name);
          }, 'loans');
        });
      }
    }
  }];

  $urlRouterProvider
    .when('', '/dashboard')
    .when('/', '/dashboard')
    .when('/login', '/dashboard')
    .otherwise('/404');

  //this will redirect all rejected promises in routes to a 404.
  $transitionsProvider.onError({
    to: '*',
    from: '*'
  }, (transition) => {
    let $state = transition.router.stateService;
    $state.go('404');
  });

  STATES.forEach((state) => {
    $stateProvider.state(state);
  });


}

在我的贷款控制器中（上面的关联状态为“贷款”），但是，我无法访问新的uiCanExit回调。

   .component('wLoans', {
    template: require('./loans.html'),
    controller: LoansController,
    bindings: {
      settings: '<',
      labels: '<'
    }
  });



 function LoansController($window, $timeout, $http, $compile, $log, $filter, LoansService, ConfigService, ngDialog, SettingsService, CustomerService, ColumnRenderService, $transitions) {
  'ngInject';

  this.uiCanExit = function () {
        console.log("WHY AM I NOT GETTING HERE");
      }
}

当我在状态之间切换时，控制台中什么都没有出现，并且我试图弄清楚如何在状态之间切换时（特别是dashboard和loans）运行uiCanExit生命周期挂钩。

最佳答案

我对此不确定，但是可能是由于未直接引用该组件引起的吗？可能只有当您通过loans键引用component组件而不是将它们放置在呈现组件的template中时，此方法才有效。我假设在您的情况下，路由器尝试在（未声明并因此为虚拟的）控制器中查找回调，而不是使用组件的控制器。

请看一下文档：https://ui-router.github.io/docs/latest/interfaces/ng1.ng1controller.html#uicanexit

您可以通过将controller实现和uiCanExit()方法置于loans状态来验证此假设。

关于javascript - 无法调用uiCanExit- Angular ui路由器1.0.0 beta，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39277446/