Question

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

这是演示的Plunker。在app.module.js中我定义了一个常量“config”。我可以这样做，当我为“child”（components / child.component.js）而不是templateUrl：“components / child.html”定义组件时，我可以说“config.rootURL + 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}}

Answer 1

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

我建议你改为查看名为$ http interceptor的功能。您可以编写拦截器来查找模板请求并修改其URL。

https://docs.angularjs.org/api/ng/service/ $ HTTP

我建议使用令牌编写模板网址，然后在拦截器中查找该令牌。例如：

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;
           }
        };
    });
});

Answer 2

而不是templateUrl：＆＃34; components / child.html＆＃34;，我可以说＆＃34; config.rootURL + child.html＆＃34;？

而是templateUrl您可以使用template撰写ng-include：

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

Angular 1.6＆amp;多个模块：在模块和模块之间共享全局变量组件

2 个答案: