Angular2組件開發—調用服務（二）

時間 2019-11-18

標籤 angular2 angular 組件開發調用服務欄目 AngularJS 简体版

原文原文鏈接

注入 - Injector

在前一節的示例代碼中，組件EzAlgo直接在構造函數中實例化了一個EzAlog對象，這形成了EzApp和EzAlgo的強耦合，咱們能夠使用Angular2的注入器/Injector進行解耦：javascript

注入器就像婚姻介紹所，男方在婚介所登記心儀的女性特色，約好見面地點，而後，坐等發貨便可。好比上圖：html

EzApp組件（男方）使用Component註解的Injector屬性向Angular2框架（婚介所）聲明其依賴於EzAlgo（登記心儀的女性特色），並在其構造函數的參數表中使用Inject註解聲明注入點（約好見面地點），而後，剩下的事兒Angular2（婚介所）就辦了：java

 1 @Component({
 2     selector : "ez-app",
 3     //聲明依賴
 4  appInjector : [EzAlgo]  5 })
 6 @View(...)
 7 class EzApp{
 8     //Angular2框架負責注入對象
 9     constructor(@Inject(EzAlgo) algo){
10         //已經得到EzAlgo實例了！
11     }
12 }

例如：算法

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>appInjector</title>
 6     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
 7     <script type="text/javascript" src="lib/angular2.dev.js"></script>
 8     <script type="text/javascript" src="lib/system.config.js"></script>
 9 </head>
10 <body>
11     <ez-app></ez-app>
12     <script type="module">
13         import {Inject,Component,View,bootstrap} from "angular2/angular2";
14         import {formDirectives,Control} from  "angular2/forms";
15         
16         //定義一個簡單的算法服務類
17         class EzAlgo{
18             add(a,b) { return a+b; }
19             sub(a,b) { return a-b; }
20         }
21 
22         //組件定義
23         @Component({
24             selector : "ez-app",
25             //appInjector : [EzAlgo]
26         })
27         @View({
28             directives:[formDirectives],
29             template : `
30                     <form> 
31                         <input type="text" ng-control="a" [(ng-model)]="a"> 
32                         +
33                         <input type="text" ng-control="b" [(ng-model)]="b"> 
34                         =
35                         {{add()}}
36                     </form>`,
37              styles:[`
38                  *{font-size:30px;font-weight:bold;}
39                 input{width:100px;}
40              `]
41         })
42         class EzApp{
43             //注入參數聲明
44  constructor(@Inject(EzAlgo) algo){
45                 this.a = 37;
46                 this.b = 128;
47                 this.algo = algo;
48             }
49             add(){
50                 var a = +this.a,
51                     b = +this.b;
52                 return this.algo.add(a,b);
53             }
54         }
55         
56         bootstrap(EzApp,EzAlgo);
57     </script>
58 </body>
59 </html>