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

服务与依赖注入

服务是什么概念？可以简单地认为它是一个功能模块，重要在于它是单例对象，并且可以注入到其他的地方使用。
依赖注入是来自后端的概念，其实就是自动创建一个实例，省去每次需要手动创建的麻烦。
在Angular中定义一个服务很简单，主要在类之前加上

@Injectable

装饰器的功能。这是最常见的依赖注入方式useClass，其他具体参见这里。

import { Injectable } from '@angular/core';

@Injectable()
export class Service {
counter: number = 0;

getData(){
return this.counter++;
}
}

然后在模块的

providers

中声明：

import { Service } from './service';
...

@NgModule({
imports: [
...
],
declarations: [
...
],
providers: [ Service ],  // 注入服务
bootstrap: [...]
})
export class AppModule {
}

使用的时候需要在构造器中建立关联：

import { Component } from '@angular/core';
import { Service } from './service';
...

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(public service: Service) {
// this.service被成功注入
// 相当于 this.service = new Service();
// 然后可以调用服务
this.service.getData();
}
}

由于该服务是在模块中注入，所以该模块中的所有组件使用这个服务时，使用的都是同一个实例。
除了在模块中声明，还可以在组件中声明。假设

AppComponent

下还有组件

HomeComponent

，此时我们在

AppComponent

中注入这个服务：

import { Component } from '@angular/core';
import { Service } from './service';
...

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

如果

HomeComponent

也使用了这个服务，那它使用的将是同一个实例。这个可以从Service中的数据变化来看出。
Angular还有个分层依赖注入的概念，也就是说，你可以为任一组件创建自己独立的服务。就像上面的例子，如果想要

HomeComponent

不和它的父组件同使用一个服务实例的话，只要在该组件中重新注入即可：

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

对于前后端的接口，通常会写成服务。下面说下请求后端数据这块应该怎么写。在模块这节中提过，http有专门的

HttpModule

模块处理请求。首先要在模块中导入

HttpModule

，然后引入http服务，调用相应的请求方法即可。

import { Injectable } from '@angular/core';
import { Http }       from '@angular/http';

import 'rxjs/add/operator/toPromise';

@Injectable()
export class HttpService {

constructor(private http: Http) {}

getFromServer():any {
return this.http.get(`/data`)
.toPromise()
.then(res => res.json())
.catch();
}
}

由于请求返回的对象是个可观察对象，可以转成Promise对象处理。这里需要用到RxJS的

toPromise

操作符，然后用

then

去处理返回成功结果，

catch

处理失败情况。这样就搞定了后端数据的请求了。
RxJS又是另外一个比较高深的话题了，有机会深入学习一下再聊。