Angularjs 角度1.6&；多个模块：在模块之间共享全局变量&；组件

我用的是Angular 1.6.7。我在我的应用程序中创建了多个模块。如何将父模块（myApp）中定义的常量（例如“rootURL”）传递给子模块（childApp）？更具体地说，我需要将“rootURL”的值分配给childApp组件的templateUrl，这样我们就不必为每个模块硬编码根目录。我想我知道如何在控制器内共享变量，但不知道如何在组件定义内共享变量

这里有一个演示。在app.module.js中，我定义了一个常量“config”。当我为“child”（components/child.component.js）定义组件而不是templateUrl：“components/child.html”时，我可以说像“config.rootURL+child.html”这样的话，我该怎么做呢？我们不必使用常量

先谢谢你

//app.module.js
（功能（）{
“严格使用”；
var myApp=角度
.module（“myApp”，“child”）；
myApp.constant（“配置”{
rootURL:“组件/”
，版本：“myApp1.0.0”
})
})();
//app.component.js
（功能（）{
“严格使用”；
//定义控制器
函数mainController（）{
这是。$onInit=function（）{
var mainVM=这个；
mainVM.parent={
“姓氏”：“史密斯”
，“名字”：“约旦”
};
};
}
//定义组件
var主组件={
控制器：主控制器
，controllerAs:“mainVM”
};
//寄存器控制器和组件
角度。模块（“myApp”）
.控制器（“主控制器”，主控制器）
.组件（“主要组件”，主要组件）；
})();
//组件/child.module.js
（功能（）{
“严格使用”；
var child=angular.module（“child”，[]）；
})();
//components/child.component.js
（功能（）{
“严格使用”；
//定义控制器
函数childController（）{
这是。$onInit=function（）{
var vm=这个；
vm.child={
“名字”：“杰克”
}
};
//$onInit（）的结尾
}
//定义组件
变量子项={
templateUrl:“组件/child.html”
，控制器：childController
，controllerAs:“虚拟机”
，绑定：{
父项：“当您使用
myApp.constant（）
注册常量时，该值将成为可注入的，就像任何其他服务一样。您可以将其注入组件的控制器并使用它，但此时angular已经下载（或尝试下载）模板。您需要在组件注册时修改URL，但是，当您注册组件时，Injectables还不可用

我建议您改为研究一个名为$http拦截器的功能。您可以编写一个拦截器来查找模板请求并修改它们的url

$http

我建议使用令牌编写模板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;
           }
        };
    });
});

当您使用
myApp.constant（）
注册常量时，该值就像任何其他服务一样可以注入。您可以将其注入组件的控制器并使用它，但此时angular已经下载（或尝试下载）模板。您需要在组件注册时修改URL，但是，当您注册组件时，Injectables还不可用

我建议您改为研究一个名为$http拦截器的功能。您可以编写一个拦截器来查找模板请求并修改它们的url

$http

我建议使用令牌编写模板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;
           }
        };
    });
});

我可以说像“config.rootURL+child.html”这样的词，而不是templateUrl：“components/child.html”

相反，您可以使用
ng include
编写
template
：

template: '<ng-include src="getTemplateUrl()"/>', 



代码示例：

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: "<"
        }
    };

功能子控制器（配置）{
this.getTemplateUrl=函数（）{
返回config.rootURL+'child.html'；
};
这是。$onInit=function（）{
var vm=这个；
vm.child={
“名字”：“杰克”
}
};
//$onInit（）的结尾
}
//定义组件
变量子项={
//templateUrl:“组件/child.html”
模板：“”
，控制器：childController
，controllerAs:“虚拟机”
，绑定：{
家长：“
我可以说像“config.rootURL+child.html”这样的词，而不是templateUrl：“components/child.html”

相反，您可以使用
ng include
编写
template
：

template: '<ng-include src="getTemplateUrl()"/>', 



代码示例：

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: "<"
        }
    };

功能子控制器（配置）{
this.getTemplateUrl=函数（）{
返回config.rootURL+'child.html'；
};
这是。$onInit=function（）{
var vm=这个；
vm.child={
“名字”：“杰克”
}
};
//$onInit（）的结尾
}
//定义组件
变量子项={
//templateUrl:“组件/child.html”
模板：“”
，控制器：childController
，controllerAs:“虚拟机”
，绑定：{
家长：“好吧，在您的子控制器中注入常量：
function childController（config）{
好吧，在您的子控制器中注入常量：
function childController（config）{
似乎可以工作。谢谢。我不明白子组件如何识别“vm”并正确解释模板：''，甚至在之后定义控制器和“vm”之前？但是，当我尝试“templateUrl:vm.getTemplateUrl+'child.html'”时，它会说“vm是n”