angular4.x的学习笔记服务与依赖注入

服务与依赖注入

服务是什么概念&＃xff1f;可以简单地认为它是一个功能模块&＃xff0c;重要在于它是单例对象&＃xff0c;并且可以注入到其他的地方使用。

依赖注入是来自后端的概念&＃xff0c;其实就是自动创建一个实例&＃xff0c;省去每次需要手动创建的麻烦。

在Angular中定义一个服务很简单&＃xff0c;主要在类之前加上&＃64;Injectable装饰器的功能。这是最常见的依赖注入方式useClass&＃xff0c;其他具体参见这里。

import { Injectable } from &＃39;&＃64;angular/core&＃39;; &＃64;Injectable()
export class Service {counter: number &＃61; 0;getData(){return this.counter&＃43;&＃43;;}
}


然后在模块的providers中声明&＃xff1a;

import { Service } from &＃39;./service&＃39;;
...&＃64;NgModule({imports: [...],declarations: [...],providers: [ Service ], // 注入服务bootstrap: [...]
})
export class AppModule {
}


使用的时候需要在构造器中建立关联&＃xff1a;

import { Component } from &＃39;&＃64;angular/core&＃39;;
import { Service } from &＃39;./service&＃39;;
...&＃64;Component({selector: &＃39;my-app&＃39;,templateUrl: &＃39;./app.component.html&＃39;,styleUrls: [&＃39;./app.component.css&＃39;]
})
export class AppComponent {constructor(public service: Service) {// this.service被成功注入// 相当于 this.service &＃61; new Service(); // 然后可以调用服务this.service.getData();}
}


由于该服务是在模块中注入&＃xff0c;所以该模块中的所有组件使用这个服务时&＃xff0c;使用的都是同一个实例。

除了在模块中声明&＃xff0c;还可以在组件中声明。假设AppComponent下还有组件HomeComponent&＃xff0c;此时我们在AppComponent中注入这个服务&＃xff1a;

import { Component } from &＃39;&＃64;angular/core&＃39;;
import { Service } from &＃39;./service&＃39;;
...&＃64;Component({selector: &＃39;my-app&＃39;,templateUrl: &＃39;./app.component.html&＃39;,styleUrls: [&＃39;./app.component.css&＃39;],providers: [ Service ], // 注入服务
})
export class AppComponent {constructor(public service: Service) {// this.service被成功注入// 相当于 this.service &＃61; new Service(); // 然后可以调用服务this.service.getData();}
}


如果HomeComponent也使用了这个服务&＃xff0c;那它使用的将是同一个实例。这个可以从Service中的数据变化来看出。

Angular还有个分层依赖注入的概念&＃xff0c;也就是说&＃xff0c;你可以为任一组件创建自己独立的服务。就像上面的例子&＃xff0c;如果想要HomeComponent不和它的父组件同使用一个服务实例的话&＃xff0c;只要在该组件中重新注入即可&＃xff1a;

...
&＃64;Component({selector: &＃39;home&＃39;,templateUrl: &＃39;./home.component.html&＃39;,styleUrls: [&＃39;./home.component.css&＃39;],providers: [ Service ], // 重新注入服务
})
export class HomeComponent {...
}


对于前后端的接口&＃xff0c;通常会写成服务。下面说下请求后端数据这块应该怎么写。在模块这节中提过&＃xff0c;http有专门的HttpModule模块处理请求。首先要在模块中导入HttpModule&＃xff0c;然后引入http服务&＃xff0c;调用相应的请求方法即可。

import { Injectable } from &＃39;&＃64;angular/core&＃39;;
import { Http } from &＃39;&＃64;angular/http&＃39;;import &＃39;rxjs/add/operator/toPromise&＃39;;&＃64;Injectable()
export class HttpService {constructor(private http: Http) {}getFromServer():any {return this.http.get(&＃96;/data&＃96;).toPromise().then(res &＃61;> res.json()).catch();}
}


由于请求返回的对象是个可观察对象&＃xff0c;可以转成Promise对象处理。这里需要用到RxJS的toPromise操作符&＃xff0c;然后用then去处理返回成功结果&＃xff0c;catch处理失败情况。这样就搞定了后端数据的请求了。

RxJS又是另外一个比较高深的话题了&＃xff0c;有机会深入学习一下再聊。

想要整理更多的碎片知识&＃xff0c;扫码关注下面的公众号&＃xff0c;让我们在哪里接着唠&＃xff01;