2

我正在使用 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}}

4

2 回答 2

0

而不是 templateUrl：“components/child.html”，我可以说“config.rootURL + child.html”之类的东西？

相反，templateUrl你可以写：templateng-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: "<"
        }
    };
于 2017-09-19T15:48:04.510 回答
0

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

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

https://docs.angularjs.org/api/ng/service/ $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;
           }
        };
    });
});
于 2017-09-19T15:42:43.443 回答