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

時間 2019-11-08

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

原文原文鏈接

注入一個複雜的服務

EzAlgo至關簡單，使用new或者使用Injector來得到一個實例看起來差異不大。那若是咱們的EzApp組件要使用Http服務呢？javascript

第一眼看上去，Http服務顯然是一個真正有用的服務 - 由於看起來至關的複雜 - Http依賴於XHRBackend和BaseRequestOptions，而XHRBackend又依賴於BrowserXHR。html

咱們能夠有兩種方法得到一個Http的實例，以便經過它得到網絡訪問的功能：java

1. 使用new進行實例化編程

若是咱們使用傳統的new方式建立Http實例，看起來應該是這樣：json

1 var xhrbe = new XHRBackend(BrowserXHR);
2 var options = new BaseRequestOptions();
3 var http = new Http(xhrbe,options);

這沒什麼新奇的，就是繁瑣一點。bootstrap

2. 使用注入器/Injectorapi

若是使用注入器，咱們須要向Angular2框架聲明這些層疊的依賴關係：網絡

1 @Component({
2     appInjector : [
3  bind(BrowserXHR).toValue(BrowserXHR), 4  XHRBackend, 5  BaseRequestOptions, 6  Http 7     ]
8 })

bind(BrowserXHR).toValue(BrowserXHR)的意思是，若是須要注入BrowserXHR類型的變量，注入這個類自己而非其實例。angular2

原理是這樣，不過Angular2已經提供了一個定義好的變量httpInjectables，咱們直接引用就能夠了。app

Observable

Observable是一種異步編程模式，與Promise不一樣，Observable等多的是從數據而非行爲的角度來封裝異步代碼。

Http服務的get()方法返回一個Observable對象，能夠把Observable對象看作一個可訂閱的數據流，你經過subscribe()方法訂閱之後，每當數據流中有新的數據，你都會獲得通知。

例如：

 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,NgFor} from "angular2/angular2";
14         //引入Http相關預約義類型
15         import {Http,httpInjectables} from "angular2/http";
16         
17         //EzApp組件
18         @Component({
19             selector:"ez-app",
20             //注入Http依賴項集合
21             appInjector:[httpInjectables]
22         })
23         @View({
24             directives:[NgFor],
25             template:`
26                 <div *ng-for="#album of band.albums"><img [src]="album.cover"></div>
27             `,
28             styles:[`
29                 img{height:200px;width:200px;}
30                 div{float:left;margin:10px;}
31             `]
32         })
33         class EzApp{
34             //注入Http實例對象
35             constructor(@Inject(Http) http){
36                 this.band = {};
37                 http.get("api/music.json")//GET請求
38                     .map(rsp=>rsp.json())//將相應轉化爲JSON格式的數據集
39                     .subscribe(data=>this.band=data[0]);//設置band變量爲數據集的第一項
40             }
41         }        
42         bootstrap(EzApp);
43     </script>
44 </body>
45 </html>