Java教程

服务与依赖注入

本文主要是介绍服务与依赖注入,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

服务的概念

服务并没有一个明确的定义,在 Angular 的应用中,比较推荐的做法是,把诸如从服务器获取数据、验证用户输入等工作委托给各种服务,而组件主要用于提供有关绑定数据到模板的属性和方法。
将组件和服务分开,可以有效提高代码的复用性。

依赖注入的概念

依赖注入不是一种技术,而是一种编程思想,能够帮助开发者设计出松耦合、可扩展、便于复用的系统。
所谓依赖,在 Angular 中,主要指服务,通过把各种服务配置到(注入的过程)模块或组件中,来共同完成业务逻辑。

创建服务

下面是已经创建好的服务文件 login.service.ts:

例子:

// 引入装饰器 Injectable
import { Injectable } from '@angular/core';

// providedIn:将服务注入到组件或模块中
// 默认值为 root,即注入到根模块,整个应用都可以访问
@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor() { }

  // 添加一个方法
  getName(){
    return 'Tom';
  }

}

下图是从宏观上观察一下服务与组件、子路由、特性模块之间的关系:

图片描述

注入服务

注入服务大致可以分为以下三种形式:

1、注入到根模块

例子:

服务文件:login.service.ts

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

// 将服务注入到根模块
// 整个应用都可以访问到
@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor() { }

  getName(){
    return 'Tom';
  }

}

使用服务的组件:login.component.ts

import { Component, OnInit } from '@angular/core';

// 导入服务
import { LoginService } from '../service/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  // 此处非常重要
  // 在构造函数中声明 LoginService 服务
  constructor(
    private loginService:LoginService,
  ) { }

  ngOnInit() {
    // 使用 LoginService 服务
    console.log(this.loginService.getName());
  }

}

2、注入到特性模块

例子:

服务文件:login.service.ts

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

// 将 providedIn: 'root' 删除
@Injectable()
export class LoginService {

  constructor() { }

  getName(){
    return 'Tom';
  }

}

在特性模块中注入需要的服务:login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginRoutes, Components } from './login.routing';

// 在特性模块中导入服务
import { LoginService } from './service/login.service';

@NgModule({
  imports: [
    CommonModule,
    LoginRoutes
  ],
  declarations: [...Components],

  // 在 providers 中注入 LoginService
  providers: [
    LoginService
  ],
})
export class LoginModule { }

使用服务的组件:login.component.ts

import { Component, OnInit } from '@angular/core';

// 导入服务
import { LoginService } from '../service/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  // 此处非常重要
  // 在构造函数中声明 LoginService 服务
  constructor(
    private loginService:LoginService,
  ) { }

  ngOnInit() {
    // 使用 LoginService 服务
    console.log(this.loginService.getName());
  }

}

3、注入到组件

例子:

服务文件:login.service.ts

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

// 将 providedIn: 'root' 删除
@Injectable()
export class LoginService {

  constructor() { }

  getName(){
    return 'Tom';
  }

}

直接在组件中注入需要的服务:login.component.ts

import { Component, OnInit } from '@angular/core';

// 导入服务
import { LoginService } from '../service/login.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],

  // 在 providers 中注入 LoginService 服务
  providers: [
    LoginService
  ],
})
export class LoginComponent implements OnInit {

  // 此处非常重要
  // 在构造函数中声明 LoginService 服务
  constructor(
    private loginService:LoginService,
  ) { }

  ngOnInit() {
    // 使用 LoginService 服务
    console.log(this.loginService.getName());
  }

}

服务的作用域

通常情况下,注入到根模块中的服务,是整个 Angular 应用都需要的服务,具有全局作用域;
而注入到特性模块中的服务,只能为这个模块下的所有组件提供服务;
如果是在组件中注入服务,那么只会在该组件及其子组件中有效,同一模块中的其它组件无法访问。

在服务中引用其他服务

与在组件中使用服务的模式相同。

例子:

需要引入其他服务的服务文件:login.service.ts

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

// 导入 ApiService 服务
import { ApiService } from '../../common/api.service';

@Injectable()

export class LoginService {

  constructor(
    // 声明 ApiService 服务
    private api:ApiService
  ) { }

  getName(){
    // 使用 ApiService 服务
    return this.api.getJson();
  }

}

end

这篇关于服务与依赖注入的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!