Angular 组件相对 templateUrl

Posted 2023-02-23

【中文标题】Angular 组件相对 templateUrl

【英文标题】：Angular component relative templateUrl

【发布时间】：2016-12-09 12:57:56

【问题描述】：

我正在开发一个模块化的角度应用程序，我在 angular-module-1 模块中定义了我的文件夹路径（常量：BASE_PATH：“path/to/folder”）。我想在位于我的应用程序的另一个模块（angular-module-2）中的角度组件中重新使用这个常量。我想在我的项目中多次使用这个常量。

module.component("relationshipSearch", 
templateUrl: BASE_PATH +'/link/to/other/folder',

witch 是将此常量定义为在所有解决方案项目中可见的全局变量的最佳方式 这是我的项目结构：

project
|-- angular-module-1
|   |-- angular-module-1.js
|   |-- angular-module-1.html
|-- angular-module-2
|   |-- angular-module-2.js
|   |-- angular-module-2.html

【参考方案1】：

我想说的是创建一个名为 angular-common 的通用模块，您可以在其中放置 common 诸如 common service、factory、directive、constants 等内容。

然后在angular-common（这将是完全独立且可插入的）模块中添加常量。如下所示

//assuming `angular-common` is already defined
angular.module('angular-common').constant('commmonSetting', 
  'BASE_PATH': '/link/to/other/folder'
)

接下来，将这个通用模块注入app（这是主模块，将在ng-app/bootstrap中使用），如下所示

angular.module('app', ['angular-common', 'ngRoute', ...other dependencies..])

当你想使用 BASE_PATH 时，只需在 controller/component 中任意位置注入 commmonSetting 依赖项即可。

app.component('myComponent', 
  templateUrl: function(commmonSetting)
    return commmonSetting.BASE_PATH +'/link/to/other/folder';
  ,
  ....
)

【讨论】：

谢谢我所需要的:)

【参考方案2】：

抱歉，在旧帖子上发布了一个接受的答案，但我想说接受的答案不是缩小安全的。写这个的最小化安全方法是：

app.component('myComponent', 
  templateUrl: function($injector)
    var commmonSetting = $injector.get('namespace.CommmonSetting');
    return commmonSetting.BASE_PATH +'/link/to/other/folder';
  ,
  ....
);

【参考方案3】：

也许另一种方法可能会有所帮助。与其设置路径，不如直接查看同一目录中的文件。

您可以使用require()，例如：

template: require('./template-in-same-dir.html')

注意template 不是templateUrl。

【讨论】：

我在询问在 Angular 应用程序的不同模块之间共享/重用常量的最佳方式。

但标题却询问了模板网址

我仍然认为我对您的具体问题的解决方案值得考虑。通过创建多个模块，您将它们耦合在一起以形成一个字符串。似乎矫枉过正。当然，烤蛋糕的方法有很多种，就看我们最喜欢哪一种了！ :)

我在同一个文件夹中有很多模板，所以我需要在 TEMPLATEURL 中使用 require 时定义一个常量路径我不能使用我的常量