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>