Question

我正在构建一个角度应用程序，我只想在请求该路由时加载我的组件。我认为这样的事情可能会起作用

const states = [{
    name: 'login',
    url: '/login?sessid',
    component: 'login',
    resolve: {
      login: () => import('./components/login.js').then(login => {
        login.default.register()
      }),
    },
}];

登录组件的位置

export default {
      register() {
        angular.module('trending')
          .component('login', () => ({
              template: 'Hello!'
            })
        )
    }
};

但是我收到了错误

angular.js?10a4:13708 Error: [$injector:unpr] Unknown provider: 
loginDirectiveProvider <- loginDirective

大概是因为登录组件在状态之前没有注册。我意识到这是滥用resolve属性的目的，我只是希望它能满足我的需求。有什么更好的解决方法？

Answer 1

应用程序启动后，您无法再声明组件。因此，为了在运行时注册组件，您必须以某种方式公开相应的工厂。下面的代码公开了主应用程序模块上的所有工厂，但如果您愿意，则只能使用组件。

const app = angular.module('trending', []);

app.config(($controllerProvider, $compileProvider, $filterProvider, $provide) => {
    app.register = {
        component: $compileProvider.component,
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };
});

这样，您只需调用app.register.component即可访问公开的工厂。例如，取自您的问题：

export default {
      register() {
        angular.module('trending')
          .register
          .component('login', () => ({
              template: 'Hello!'
            })
        )
    }
};

您可能会发现一种更好的方式来注册您的模块，这只是为了答案的一个演示，您可以更改使用的命名法甚至是暴露机制，以更好地适应您的花哨es6+组件

懒加载1.5角组件

1 个答案: