Question

你好伙伴stackoverflowers，我已经尝试了一段时间但没有成功实施使用新组件路由器（ngComponentRouter）延迟加载角度组件。这是我用于配置主要组件的代码：

if($type = 'red' || $type = 'blue'){
  $type = 'winered';
  $type =  $type.'royalblue';
}

我的第一个问题是我无法使用在装载程序propety中注入的ocLazyLoad，因此我将其加载到主控制器中并在loader属性中引用它。在那之后我终于让它在装载机内工作了我似乎无法让它实际加载我一直收到此错误的组件：

//define main app component 
    app.value("$routerRootComponent","simpleTrackerApp");
//main app component config
    
    var lazyLoaderMod = null;
    var httpService = null;
    
    app.component("simpleTrackerApp", {
        /*@ngInject*/
        controller:function ($ocLazyLoad,$http) {
            lazyLoaderMod = $ocLazyLoad;
            httpService = $http;

        },
        templateUrl: CONFIG_APP_SHARED_URL + 'mainComponent/simpleTrackerApp.html',
        $routeConfig: [
            { 
                useAsDefault:true,
                path:"/bugs", 
                name:"Bugs",
                loader: function () {
                    return lazyLoaderMod.load(CONFIG_APP_COMPONENTS_URL + 'bug/bugs/bugsCtrl.js');
                }
            },
            {path:'/**',redirectTo:['Bugs']}
        ]
    });

现在我知道我在装载机中显然做错了什么而且我需要以某种方式注册该组件。但我找不到有关装载机角度的任何文档，没有其他人使用新路由器延迟加载组件，所以我真的无法想象如何实现这一点。

我真的很感激这方面的一些帮助，但我总体上也在想如果使用角度分量路由器可能为时过早缺乏文档和支持。所以我真的很想听到其他有远见的角度程序员的消息他们对此事的看法。

编辑：任何人对此事有任何见解吗？..

Answer 1

You could use $router instead of the http-service. Applied on your code:

app.component("simpleTrackerApp", {

templateUrl: 'mainComponent/simpleTrackerApp.html',

controller: ['$router', '$ocLazyLoad', function ($ocLazyLoad, $http) {

    $router.config([
        {
            path: '/bugs/',
            name: "Bugs",
            loader: function () {
                return $ocLazyLoad.load('/bugsFolder/bugs.component.js') //no url, set the path to your component 
                    .then(function () {
                        return 'bugs' //name of your component
                    })
                }
            }

        ])

    }],

});

And don't forget to inject your dependencies in the app.module.

无法使用角度组件路由器来处理组件的延迟加载

1 个答案: