浅谈Angular6的服务和依赖注入

2024-09-27 13:32:04

在开发中,组件一般用来写视图有关的功能,服务则写一些其他的逻辑,诸如从服务器获取数据、验证用户输入或直接往控制台中写日志等工作.

先解释两个概念:

Providers(提供商):是个比较抽象的名词,我们把它想象为'图纸'更好理解一些,就比如我们想要生产汽车,就需要先有汽车的图纸,图纸上记录了生产工艺和材料尺寸之类,这样汽车才生产的出来.provider通常就是自己写的服务类.
Injector(注入器):就是字面上的意思,将某一类事物注入到另一类事物中的工具.angular应用在启动时,会自动创建.

假想一个去医院看病的过程:

找医生看病判断病情,医生开处方 --> 处方交给护士 --> 护士小姐姐根据处方给你注射药物.

这里医生开的处方是providers,将处方交给护士则是将providers注册到injector,护士小姐姐是injector

angular中有很多方式可以将providers注册到injector:

@Injectable 装饰器

在服务类的 @Injectable 装饰器中

  //service
  @Injectable({
    providedIn: 'root',
  })

providedIn: 'root' 告诉 Angular在根注入器中注册这个图纸.root 还可以是某一个具体的模块名.

这种方式注册,在代码编译打包时,可以执行摇树优化，这会移除所有没在应用中使用过的服务。摇树优化会使打包体积更小。

@NgModule 中的 providers

在模块的 @NgModule 中

  //service
  @Injectable()
  //module
  @NgModule({
    providers: [
      UserService,
      { provide: APP_CONFIG, useValue: HERO_DI_CONFIG }
    ],
  })

这种方式注册,可以对图纸进行一些额外的配置.

note:在@NgModule中注册的服务,在图纸中也需要写@Injectable()装饰器

在组件中注册

在组件的 @Component 中

  @Component({
  selector: 'app-heroes',
  providers: [ HeroService ]

这种方式注册,会注册到每个组件实例自己的注入器上。(多个组件会有多个注入器)

note:服务在每个注入器的范围内是单例的。在任何一个注入器中，最多只会有同一个服务的一个实例。

不提供图纸

最常见的图纸是class,但是在配置providers: []时,也可以不提供class图纸,而是返回对象的工厂函数,或是对象字面量[{ provide: Logger, useClass: Logger }]

也可以使用useValue属性直接交付一个对象实例,[{ provide: Logger, useValue: silentLogger }]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Angular项目如何升级至Angular6步骤全纪录

前言前段时间将所负责的 Angular2 项目升级到了 Angular5 版本,这两天又进行了升级至 Angular6 的尝试.总的来说,两次升级过程比较类似,也不算复杂. 2018年5月4日,Angular6.0.0版正式发布,新版本主要关注底层框架和工具链,目的在于使其变得更小更快. 特性的小改动: animations: 只能使用 WA-polyfill 和 AnimationBuilder animations: 在转换匹配器中暴露元素和参数 common: 在 NgIf 中使用非模板
详解Angular6 热加载配置方案

Angular6 热加载配置方案,分享给大家,具体如下: 示例 ng 版本如下 : $ ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|
Angular6 写一个简单的Select组件示例

Select组件目录结构 /src /app /select /select.ts /select.html /select.css /options.ts /index.ts //select.ts import { Component, ContentChildren, ViewChild, Input, Output, EventEmitter, QueryList, HostListener } from '@angular/core'; import { NzOptionDirecti
详解Angular6.0使用路由步骤(共7步)

今天写的有点儿多了,前几天一直写js基础.今天想聊聊angular6.0的路由实现.因为有公司已经开始转向angular6.0了.写完赶紧吃饭去了. 声明一下,以下路由的实现是基于angular6.0 脚手架实现的. 脚手架的安装方法不在此讨论范围内. 第一步:创建一个路由文件. 通过指令ng g module 模块名称;来创建一个路由模块文件; 第二步: 在app.component.html模板文件中,定义路由渲染的位置; 第三步: 引入路由模块以及路由规则模块(在app-routing.
Angular6笔记之封装http的示例代码

最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块. 之前使用的ajax库是axios,可以设置baseurl,公共头部:集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通过拦截器(HttpInterceptor)来实现这一功能. 拦截器可以拦截请求,也可以拦截响应,那么通过拦截请求就可以实现设置base
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

第一步准备好api接口地址, 例如 https://api.example.com/api/ 第二步在根组件 app.components.ts 中引入 HttpClientModule 模块. // app.components.ts import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块 imports: [ BrowserModule, AppRoutingModule, H
angular6.0开发教程之如何安装angular6.0框架

在5月4日这天,angular家庭迎来了最新版本--angular6.0,angular6.0时代正式到来.6.0版本重点关注工具链以及工具链在Angular中的运行速度问题.angular6.0在原angular5的基础上有了非常大的改进. angular6.0的CLI版本跟angular版本正式对应,也是6.0,而angular5版中的CLI版本是1.7.3版. angular6.0新增了update升级功能,后期angular有新版本时,可以直接通过update就可以升级到最新版. ang
Angular6封装http请求的步骤详解

最近抽空学习了一下Angular6,之前主要使用的是vue,所以免不了的也想对Angular6提供的工具进行一些封装,今天主要就跟大家讲一下这个http模块. 之前使用的ajax库是axios,可以设置baseurl,公共头部:集中捕捉错误等,由于Angular6的依赖注入机制,是不能通过直接修改http模块暴露的变量来封装的,但是通过官方文档我们知道可以通过拦截器(HttpInterceptor)来实现这一功能. 拦截器可以拦截请求,也可以拦截响应,那么通过拦截请求就可以实现设置baseur
基于angular6.0实现的一个组件懒加载功能示例

我们常常会遇到这样一个问题,当我们使用一个第三方控件库的时候,我们只用到了其中 1 个或某几个组件,会连带一大堆无用的东西,造成体积臃肿不堪.又或者首页用到的组件较多,首页加载速度缓慢,这个时候,我们或许需要加载用户可视范围内用到的组件,随着用户的浏览下拉,我们再去加载这些组件,渐进式加载,渐进式体验,这个时候你或许就用到了本工具所实现的功能.或者一个页面的某些不重要区域,比如第三方广告又或者不重要的元素,可以采用懒加载懒渲染,降低用户首屏等待时间.一切都在用户不知不觉中进行.大大增加用户体验,
Angular6中使用Swiper的方法示例

项目使用的Angular版本是V6.0.3 安装Swiper npm install swiper --save 或者 yarn add swiper --save 在angular.json文件添加swiper.js和swiper.css angular.json 安装模组定义档 npm install @types/swiper --save 或者 yarn add @types/swiper --save 配置tsconfig文件 tsconfig.json tsconfig.app.js

浅谈Angular6的服务和依赖注入

相关推荐

随机推荐