我正在使用Angular 1.6.7。我在应用程序中创建了多个模块。如何将父模块（MyApp）中定义的常数（例如" rooturl"）传递到子模块（ChildApp）？更具体地说，我需要将" rooturl"的值分配给ChildApp组件的模板图，因此我们不必为每个模块的根目录进行硬编码。我想我知道如何在控制器内共享变量，但不知道如何在组件的定义中执行此操作。
这是演示的杂物。在app.module.js中，我定义了一个常数" config"。我该怎么办，当我定义" child"组件（components/child.component.js），而不是templateurl：" components/child.html"时，我可以说诸如'config.roturl child.html之类的话"？我们不必使用常数。
预先感谢您。
// app.module.js
(function(){
"use strict";
var myApp = angular
.module("myApp", ["child"]);
myApp.constant("config", {
rootURL: "components/"
, version: "myApp1.0.0"
})
})();
// app.component.js
(function(){
"use strict";
// Define controller
function mainController(){
this.$onInit = function() {
var mainVM = this;
mainVM.parent = {
"lastName": "Smith"
, "firstName": "Jordan"
};
};
}
// Define component
var mainComponent = {
controller: mainController
, controllerAs: "mainVM"
};
// Register controller and component
angular.module("myApp")
.controller("mainController", mainController)
.component("mainComponent", mainComponent);
})();
// components/child.module.js
(function(){
"use strict";
var child = angular.module("child", []);
})();
// components/child.component.js
(function(){
"use strict";
// Define controller
function childController() {
this.$onInit = function() {
var vm = this;
vm.child = {
"firstName": "Jack"
}
};
// end of $onInit()
}
// Define component
var child = {
templateUrl: "components/child.html"
, controller: childController
, controllerAs: "vm"
, bindings: {
parent: "<"
}
};
// Register controller and component
angular.module("child")
.controller("childController", childController)
.component("child", child);
})();<!DOCTYPE html>
<html>
<head>
<script src="//code.angularjs.org/snapshot/angular.js"></script>
<link rel="stylesheet" href="style.css">
<script src="app.module.js"></script>
<script src="app.component.js"></script>
<script src="components/child.module.js"></script>
<script src="components/child.component.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController as mainVM">
Parent: {{mainVM.parent.firstName}} {{mainVM.parent.lastName}}<br>
<child parent="mainVM.parent"></child>
</body>
</html>
<!-- components/child.html -->
Child: {{vm.child.firstName}} {{vm.parent.lastName}}而不是templateUrl：" conterents/child.html"，我可以说诸如'config.rooturl child.html"？
之类的话
templateUrl您可以用ng-include写template：
template: '<ng-include src="getTemplateUrl()"/>',
和：
scope.getTemplateUrl = function () {
return config.rootURL + 'child.html';
};
demo plunker
代码示例：
function childController(config) {
this.getTemplateUrl = function(){
return config.rootURL + 'child.html';
};
this.$onInit = function() {
var vm = this;
vm.child = {
"firstName": "Jack"
}
};
// end of $onInit()
}
// Define component
var child = {
//templateUrl: "components/child.html"
template: '<ng-include src="vm.getTemplateUrl()"/>'
, controller: childController
, controllerAs: "vm"
, bindings: {
parent: "<"
}
};
使用myApp.constant()注册常数时，值就像其他任何服务一样可注入。您可以将其注入组件的控制器并使用它，但是到那时，Angular已经下载（或尝试下载）模板。您需要在组件注册时间修改URL，但是，注册组件时尚不可用。
我建议您改用一个称为$ HTTP拦截器的功能。您可以编写一个拦截器来查找模板请求并修改其URL。
https://docs.angularjs.org/api/ng/service/qunthtp
我建议用令牌编写模板URL，然后在拦截器中寻找该令牌。例如：
templateUrl: '{tplBase}/myTemplate.html'
然后是一个寻找令牌并将其交换为根URL
的拦截器myApp.config(function($httpProvider) {
//The interceptor factory is injectable, so inject your config constant here...
$httpProvider.interceptors.push(function(config) {
return {
'request': function(httpConfig) {
if (httpConfig.url.contains('{tplBase}')) {
httpConfig.url = httpConfig.url.replace('{tplBase}', config.rootUrl);
}
return httpConfig;
}
};
});
});