将组件 TemplateURL 设置为配置的路径答案

【问题标题】：Set component TemplateURL to configured path将组件 TemplateURL 设置为配置的路径
【发布时间】：2016-08-01 16:51:03
【问题描述】：

我正在尝试使用模板URL 设置组件，该模板URL 是给定配置模块的相对路径。但是，由于它在控制器之外，我无法弄清楚如何将依赖项引入配置

app.config.js：

angular.module('app.config', [])
    .constant('config', {
     TEMPLATES_URL: 'js_2/templates/',
     COMPONENTS_URL: 'js_2/components/'

})

home.app.js：

angular.module('home.app', ['rest.service', 'app.config']);

home.component.js：

angular.module('home.app').component('home', {
    /* HOW DO I INJECT THE 'config' DEPENDENCY */
templateUrl: config.TEMPLATES_URL + 'home.template.html',
controller: ....})

我知道当注入控制器时，您只需注入“配置”并使用它，但我不知道如何对组件执行此操作

谢谢

【问题讨论】：

Angular 1.5 component method templateUrl + function的可能重复
我不相信链接提供了任何方法来实际注入到 templateURL 方法中，但它是吗？你会遵循相同的过程 templateUrl: ['config', function(....)]
没错。 Angular 中的所有可注入函数都以相同的方式调用（框架使用$injector.invoke 方法调用它们）并遵循相同的众所周知的 DI 方案。你知道一个，你都知道。

标签： angularjs angularjs-components angularjs-config

【解决方案1】：

您需要在 templateUrl 上设置一个函数来注入您的服务并返回 url，如下所示：

  angular.module('fsad').component('fsadLeefloon', {
    bindings: {
      onChanges: '&?'
    },
    templateUrl: function(appConstant){return appConstant.paths.modules.fsad + 'leefloon/fsad-leefloon.html'},
    controller: controller
  });

另外，这个structure guide 可以帮助你建立一个好的组件样式。

【讨论】：