开发者社区> 问答> 正文

在路由的resolve中使用lazyload加载控制器无效

a123456678 2016-03-12 09:33:02 863

背景:

webpack打包
angular-ui-router配置路由
angular1.4.7
ocLazyLoad

//写法1
$stateProvider
        .state('app', {
            url: '/app',
            template: require('./views/app.html'),
            controller: 'layoutsController as vm',
            resolve: {
                loadLayoutsController: function($q, $ocLazyLoad) {
                    console.info('state resolve:', 'app, layoutsController');
   
                    var deferred = $q.defer();
                    let layoutsModule = require('../layouts');
                    $ocLazyLoad.load(layoutsModule.name);
                    deferred.resolve(layoutsModule.controller);
                    return deferred.promise;
                }
            }
        });
       
//写法2       
$stateProvider
        .state('app', {
            url: '/app',
            template: require('./views/app.html'),
            controller: 'layoutsController as vm',
            resolve: {
                loadLayoutsController: function($ocLazyLoad) {
                    console.info('state resolve:', 'app, layoutsController');
                    let layoutsModule = require('../layouts');
                    return $ocLazyLoad.load(layoutsModule.name); 
                }
            }
        });
       
// ../layouts/layouts.controller.js       
export default function layoutsController($scope) {
    'ngInject';
    console.info('layoutsController:', 'controller is loaded');
}

// ../layouts/index.js
import layoutsController from './layouts.controller.js';

let layoutsModule = angular

.module('layouts', [])
.controller('layoutsController', layoutsController);

export default layoutsModule.name;
采用写法1时能够正常打出
console.info('state resolve:', 'app, layoutsController');和
console.info('layoutsController:', 'controller is loaded');两条信息
采用写法2时只能够正常打出
console.info('state resolve:', 'app, layoutsController');一条信息,layoutsController没有正常运行。

请问这是为什么呢?

分享到
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:00:07

    ES6 的 export default 导出的是一个具有 default 属性的对象
    $ocLazyLoad.load(layoutsModule.name) 中的 layoutsModule.name 实际上为 undefined
    应该使用 layoutsModule.default 来获取到
    $ocLazyLoad.load({name: moduleName}) 来加载模块,当直接写字符串时好像会被认为是文件(这部分还有待确定,具体可以扒 oclazyload 的源码)
    综上所述,代码如下

    resolve: {
                loadLayoutsController: function($ocLazyLoad) {
                    let layoutsModule = require('../layouts');
                    return $ocLazyLoad.load({name: layoutsModule.default}); 
                }
            }
    0 0
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章