angular服务使用

服务用于处理复杂的逻辑关系,而且因为是单例对象,可以用于兄弟组件之间传递数据。

依赖注入

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(); 
        
    }
}
posted @ 2019-09-23 16:24  haozj  阅读(293)  评论(0编辑  收藏  举报