开发者社区> 问答> 正文

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

背景:

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没有正常运行。

请问这是为什么呢?

展开
收起
a123456678 2016-03-12 09:33:02 2143 0
1 条回答
写回答
取消 提交回答
  • 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}); 
                }
            }
    2019-07-17 19:00:07
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载