服务用于处理复杂的逻辑关系,而且因为是单例对象,可以用于兄弟组件之间传递数据。
依赖注入
1.定义服务
import { Injectable } from '@angular/core'; @Injectable() //如果这个服务在构造器内注入了其他服务,必须加上这个注解,否则编译时会无法确定其他服务的类型报错。export class Service { }
2.定义好服务后,将服务注入到模块的providers数组内,如下:
import { Service } from './service';@NgModule({ imports: [ ... ], declarations: [ //生命模块内组件 ... ], providers: [ Service ], // 注入服务 bootstrap: [...] //主界面,只有根模块可用})export class AppModule {}
3.在组件的构造方法内,定义就完成注入,类似于java的spring框架那样定义注入的变量。(该模块下的组件都可以自动注入这个服务,比如这个是根模块,那么整个项目的组件都可以使用了,而且是单例的)
还有一种简便方法,如下:
import { Injectable } from '@angular/core'; @Injectable( providers:'root' //这样就无需在根模块内的providers种注入了,可以换成其他模块) export class Service { }
自动注入不仅可以在模块内使用,还可以注入到组件,如下:
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 = new Service(); }}