前言

不探究高深理论，只探究实际使用，有更好的写法或者经验请指出;
有些暂时没涉及到的知识我可能会顺着例子解释；

---

什么是服务

简言之：就是资源获取，以及通讯逻辑处理的地方；

Angular2的服务引入了依赖注入这个概念。详情看这个；

【依赖注入：中】
【依赖注入：英】

我看github上有些项目的service写的很复杂（很重），但是我不大喜欢这样。
我力求service内少处理复杂逻辑。这可能和每个人的开发理念不一样。。举一个例子，看代码。

// vehicle-fault.service.ts // 服务类必须引入这个
import { Injectable } from '@angular/core';// 自己封装的鉴权
import { AuthService } from '../../../services/auth.service';// 我这里存放了接口请求地址还有一些公用信息。nginx做反向代理所以不走baseurl
import { environment } from '../../../../environments/environment';// 不可忘记括号，任何装饰器都一样，防止莫名的错误
@Injectable()
export class VehicleFaultService {// DI(依赖注入)  // 常规的写法 this.authHttp = new AuthService()；// 这个写法也是可以的，官方不推荐，说不好维护（当项目大起来的时候）constructor(private authHttp: AuthService) { }// 获取故障提示列表VehicleFaultList(data) {return this.authHttp.post(environment.baseUrl + 'VehicleFault/VehicleFaultList', data);}// 获取单个车辆的故障列表SingleVehicleFaultList(data) {return this.authHttp.post(environment.baseUrl + 'VehicleFault/SingleVehicleFaultList', data);}// 根据车辆ID获取单车信息VehicleDetail(data) {return this.authHttp.post(environment.baseUrl + 'Vehicle/VehicleDetail', data);}// 清除故障码ClearFault(data) {return this.authHttp.post(environment.baseUrl + 'VehicleFault/ClearFault', data);}// 这里的每个接口返回一个可观察的订阅对象
}复制代码

那么我们应该如何让服务可以正常使用呢？

大致有那么两种；

• 模块内注入，整个模块内的components皆可以使用

    import { NgModule } from '@angular/core';  -- 内置// 除了根模块用BrowserModule，其他一些模块需要用到一些内置指令(*ngIf,*ngFor这些的)必须引入这个 -- 内置import { CommonModule } from '@angular/common'; // 路由模块 -- 内置import { RouterModule } from '@angular/router';// 表单模块，及响应式表单模块 -- 内置import { FormsModule, ReactiveFormsModule } from '@angular/forms';import { VehicleFaultRoutes } from './vehicle-fault.routes';// service import { VehicleFaultService } from './vehicle-fault.service';// componentimport { VehicleFaultComponent } from './vehicle-fault.component';import { ListComponent } from './list/list.component';import { DetailComponent } from './detail/detail.component';import { CleanComponent } from './clean/clean.component';// public moduleimport { MitPipeModule } from '../../../widgets/mit-pipe/mit-pipe.module';import { MitDataTableModule } from '../../../widgets/mit-data-table/mit-data-table.module';import { MitAlertModule } from '../../../widgets/mit-alert/mit-alert.module';import { MitLoadingModule } from '../../../widgets/mit-loading/mit-loading.module';import { DepartmentSelectModule } from './../../../share/department-select/department-select.module';const mitModule = [MitPipeModule,MitDataTableModule,MitAlertModule,MitLoadingModule,DepartmentSelectModule];@NgModule({imports: [ // 引入相关的模块...mitModule,FormsModule,RouterModule,CommonModule,VehicleFaultRoutes],declarations: [VehicleFaultComponent, ListComponent, DetailComponent, CleanComponent], // 声明组件providers: [VehicleFaultService] // 服务注入// providers : [{provide:vfualt, useClass:VehicleFaultService}] // 这是一种别名的写法})export class VehicleFaultModule { }复制代码

// 引入一些生命周期的控制，组件值传递响应接口等
import { Component, OnInit, AfterContentInit, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';// 引入路由模块
import { Router, ActivatedRoute } from '@angular/router';// 基类
import { MitDataTableBase } from '../../../../widgets/mit-data-table/mit-data-table-base';// 服务
import { VehicleFaultService } from '../vehicle-fault.service';
import { EventsService } from '../../../../services/events-service.service';// 动画
import { fadeIn } from '../../../../animation/fadeIn';@Component({selector: 'app-list',templateUrl: './list.component.html',styleUrls: ['./list.component.scss'],animations: [fadeIn]
})
export class ListComponent extends MitDataTableBase implements OnInit, OnDestroy {private getRenderList: any;private currentItem: any;private showAlert = false;constructor(private vehicleFaultService: VehicleFaultService, private eventsService: EventsService, private router: Router, private activatedRoute: ActivatedRoute) {super(router, activatedRoute);}ngOnInit() {}
}// 若是要使用别名注入，还需要引入Inject,从core里面 -- 在components
// 然后放在construcor里面，写法如下
// constructor(@Inject('vfault') private vehicleFaultService: any)
// 这样就可以使用了，且在components内不需要引入对应的服务！！！！复制代码

• 单一components内注入，自己使用

组件内用providers引入

// 服务
import { vehicleFaultService } from '../vehicle-fault.service';
import { EventsService } from '../../../../services/events-service.service';// 动画
import { fadeIn } from '../../../../animation/fadeIn';@Component({selector: 'app-list',templateUrl: './list.component.html',styleUrls: ['./list.component.scss'],animations: [fadeIn],providers: [vehicleFaultService, EventsService]
})复制代码

---

总结

1. 服务若是结合@Inpu(),@Output()..感觉不需要ngrx这种状态管理
2. 服务可以贯穿全局(全局注入)，事件广播这些都可以实现
3. 服务不应该太重(比如处理一些复杂的逻辑)，一个服务内部应该清晰，简洁。。

最最重要的。。还是多查阅官方的API,然后动手实践，才能让你上手快起来。。。