Angular.js 组件动态模板URL

Posted

技术标签:

【中文标题】Angular.js 组件动态模板URL【英文标题】:Angular.js components dynamic templateURL 【发布时间】:2017-01-21 02:30:14 【问题描述】:

我正在尝试使用角度组件创建动态 templateUrls。但我得到这个错误:

Error: [$injector:unpr] Unknown provider: eProvider <- e

angular
    .module('myApp')
    .component('fieldComponent', 
        templateUrl: function ($element, $attrs) 
           return $attrs.templateUrl || 'some/path/default.html'
        ,
        controller:fieldComponentController,
        controllerAs:'vm',
        $routeConfig: [
            path: '/dashboard', component: 'dashboardApp', name: 'Dashboard', useAsDefault: true
        ]
    );

随着文件被缩小,它的抛出错误如上。那么我在哪里以及如何注入这个依赖项呢?

【问题讨论】:

【参考方案1】:

我猜你在 fieldComponentController 中的 DI 被缩小了。当代码被缩小时,你的依赖项的名称会被更改为“e”之类的东西,Angular 不知道如何处理。

解决这个问题的一种方法是利用 ng-annotate (https://github.com/olov/ng-annotate) 以一种缩小安全的方式重写这些变量名。

如果您使用 Webpack 之类的构建工具进行打包和压缩,您只需将 ngAnnotatePlugin 添加到您的配置中,并在控制器定义的顶部包含字符串 'ngInject'

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout)        

"ngInject";
...
);

ES2015 版本:

export class MyCtrl 
    constructor($scope, $timeout)
        'ngInject';
    

【讨论】:

在控制器内部注入服务没问题,但是templateurl函数如何实现呢? 嗯嗯-我不确定。我想知道您是否可以在控制器中注入这些依赖项,然后通过使用带有动态加载模板的 ng-include 的 div 来动态设置模板【参考方案2】:

按照@Matt Richards 的建议,我可以通过在顶部添加 /@ngInject/ 来做到这一点。

/*@ngInject*/
angular
    .module('myApp')
    .component('fieldComponent', 
        templateUrl: function ($element, $attrs) 
           return $attrs.templateUrl || 'some/path/default.html'
        ,
        controller:fieldComponentController,
        controllerAs:'vm',
        $routeConfig: [
            path: '/dashboard', component: 'dashboardApp', name: 'Dashboard', useAsDefault: true
        ]
    );

但是,我最终还是选择了ng-include,而不是采用动态模板方法,并节省了我覆盖单元测试用例的时间。

【讨论】:

以上是关于Angular.js 组件动态模板URL的主要内容,如果未能解决你的问题,请参考以下文章

如何基于先前的服务器端调用创建动态 Angular JS 4 子组件

Vue.js 之browserify项目模板快速入门

Angular2.js——表单(上)

更新变量时动态刷新模板的一部分golang

node.js 的服务器端模板

带有 clipPath 的 div 的单击事件在 angular.js 中不起作用