Angular 1.6和多個模塊：在模塊和組件之間共享全局變量

我正在使用Angular 1.6.7。我在我的應用程序中創建了多個模塊。如何將父模塊（myApp）中定義的常量（例如「rootURL」）傳遞給子模塊（childApp）？更具體地說，我需要將「rootURL」的值賦給childApp組件的templateUrl，所以我們不必爲每個模塊的根目錄進行硬編碼。我想我知道如何在控制器中共享變量，但不知道如何在組件的定義內部執行該操作。Angular 1.6和多個模塊：在模塊和組件之間共享全局變量

下面是演示的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}}

來源

2017-09-19 Telly Ipock

好，注入常在你的孩子控制器：'函數childController（配置）{' –

代替templateUrl一個攔截器：「組件/ child.html」，我能說些什麼像「config.rootURL + child.html」？

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

來源

2017-09-19 15:48:04

它似乎工作。謝謝。我不明白子組件如何正確識別「vm」和解釋模板：''，甚至在控制器和「vm」之後定義之前？但是，當我嘗試「templateUrl：vm.getTemplateUrl +'child.html'」它說「虛擬機沒有定義」（這對我來說更有意義）。 –

我明白了。謝謝@Maxim Shoustin –

當您註冊使用myApp.constant()這個值變爲注入，能夠像任何其他服務的常數。你可以將它注入組件的控制器並使用它，但是到那時角已經下載（或試圖下載）模板。您需要在組件註冊時修改URL，但註冊組件時尚未提供注入組件。

我建議你改爲調用一個名爲$ http攔截器的特性。你可以寫一個攔截器來尋找模板請求並修改它們的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; 
      } 
     }; 
    }); 
});

來源

2017-09-19 15:42:43

謝謝。我也會試試這個。 –

Angular 1.6和多個模塊：在模塊和組件之間共享全局變量

回答

相關問題