angular的注入器是什么?

在依赖注入和依赖查找的时候注入器和提供器就需要使用。接下来就简单介绍一下注入器和提供器。

注入器

Angular提供的类,一般不需调用,会自动通过组件的构造函数注入。

1.当一个提供器提供在模块中时,他是对所有组件是可见的,所有组件都可以注入

2.当一个提供器提供在组件中时,他只对声明它的组件及其子组件是可见的,其他组件不可以注入

语法如下:

constructor(private productService: ProductService){…}

提供器

1.当声明在模块中的提供器和声明在组件中的提供器具有相同的token时,声明在组件的提供器会覆盖声明在模块中的提供器

2.服务提供器优先声明在模块中,只有服务必须在某个组件可见,对其他组件不可见时才声明在组件中

为了让注入器明白,需要被注入的对象如何实例化。一般写在AppModule中的providers中,特殊情况写在组件@Component注解中

//AppModule 中的写法
@NgModule({
    providers:[ProductService]
    //等价于
    //providers:[{provide:ProductService,useClass:ProductService}]
})
export class AppModule { }
//组件中的写法
@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css'],
  providers:[{provide:ProductService,useClass:ProductService}]
})

依赖注入demo

假设,通过不同的服务方法展示不同的股票信息

思路如下

- 新建组件stock和服务stock.service.ts,使用依赖注入显示股票信息1

- 新建新的服务stock2.service.ts,显示股票信息2

新建组件stock和服务stock.service.ts

//stock.service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class StockService {

  constructor() { }
  getStock():Stock{
    return new Stock(1,'NBM');
  }
}
export class Stock{
    constructor(public id:number,public name:string){}
}
//stock.component.ts
import { Component, OnInit } from '@angular/core';
import { StockService,Stock } from '../shared/stock.service';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  stock:Stock;
  constructor(public stockService:StockService) { }

  ngOnInit() {
    this.stock = this.stockService.getStock();
  }

}
//app.module.ts
providers: [StockService]

当使用服务2时,只需在stock.component中构造函数注入服务2即可。

import { Injectable } from '@angular/core';
import {StockService,Stock} from './stock.service';

@Injectable()
export class Stock2Service implements StockService {

  constructor() { }
  getStock():Stock{
    return new Stock(2,'software');
  }

}
import { Component, OnInit } from '@angular/core';
import { Stock2Service } from '../shared/stock2.service';

@Component({
  selector: 'app-stock',
  templateUrl: './stock.component.html',
  styleUrls: ['./stock.component.css']
})
export class StockComponent implements OnInit {
  stock:Stock;
  constructor(public stockService:Stock2Service) { }

  ngOnInit() {
    this.stock = this.stockService.getStock();
  }

}
//app.module.ts
providers: [StockService,Stock2Service]

Tips:新建服务的命令行写法:ng g service stock,之前使用cnpm命令,导致无法创建service 文件。解决办法是,卸载了之前的@angular/cli,改用npm install g @angular/cli 就可以了。

提供器的作用域

提供器可写在模块和组件。

  • 模块:写在AppModule的providers声明中,全局作用域,对所有组件可见

  • 组件:写在组件@Component注解中,写在属性providers中,只对声明它的组件及其子组件可见,一般不推荐使用

//写在组件的service
import { Component, OnInit } from '@angular/core';
import { Stock,StockService } from '../shared/stock.service';
import { Stock2Service } from '../shared/stock2.service';

@Component({
  selector: 'app-stock2',
  templateUrl: './stock2.component.html',
  styleUrls: ['./stock2.component.css'],
  providers:[{provide:StockService,useClass:Stock2Service}] 
})
export class Stock2Component implements OnInit {
  stock:Stock;
  constructor(public stockService:StockService) { }

  ngOnInit() {
    this.stock = this.stockService.getStock();      
  }

}
//与写在模块中的服务相比,只是provider的写法不同,而构造函数注入的依然是同个名字的StockService,
//但组件服务的优先级>模块服务,所以构造函数中的StockService将优先使用组件中的 
//providers:[{provide:StockService,useClass:Stock2Service}]

Injectable()

写Injectable(),使其构造函数可以注入其它服务,而组件中@Component装饰器,管道装饰器都是Injectable的子类。所以,简而言之——@Injectable()、@Component 等都是为了使其构造函数可注入其他服务

//在StockService 服务中注入服务AnotherstockService 
import { Injectable } from '@angular/core';
import { AnotherstockService } from '../shared/anotherstock.service';

@Injectable()
export class StockService {

  constructor(public anotherstockService:AnotherstockService) { }
  getStock():Stock{
    this.anotherstockService.login('getstock');
    return new Stock(1,'NBM');
  }
}
export class Stock{
    constructor(public id:number,public name:string){}
}
//AnotherstockService 服务
import { Injectable } from '@angular/core';

@Injectable()
export class AnotherstockService {

  constructor() { }
  login(message:string){
    console.log(message);
  }

}

而stock组件注入的StockService不需任何改变就可以在页面打印console.log(message)

学习service的时候深深地掉入了cnpm的坑,查了一下应该是cnpm的资源欠缺导致,换成npm就可以了

Image placeholder
前端答疑
未设置
  85人点赞

没有讨论,发表一下自己的看法吧

推荐文章
angular和vue是什么?

Angular是什么?Angular是一个基于TypeScript的开源Web应用程序框架,一个用HTML,CSS和JavaScript/TypeScript构建客户端应用程序的框架。Angular是

深入了解Nodejs Buffer的使用

JavaScript起初为浏览器而设计,没有读取或操作二进制数据流的机制。Buffer类的引入,则让NodeJS拥有操作文件流或网络二进制流的能力。Buffer基本概念Buffer对象的内存分配不是在

leveldb源代码分析系列1.1:memtable中comparator的实现

leveldb中memtable封装了一个skiplist用来存储真正的数据,跳跃列表的实现一定需要定义存储项的序关系,而在leveldb中这个序关系通过comparator相关类来实现。leveld

Disruptor的简单介绍与应用

前言最近工作比较忙,在工作项目中,看了很多人都自己实现了一套数据任务处理机制,个人感觉有点乱,且也方便他人的后续维护,所以想到了一种数据处理模式,即生产者、缓冲队列、消费者的模式来统一大家的实现逻辑。

css预处理器是什么意思?

css预处理器是什么意思?css预处理器用来定义一种新的语言,完全兼容css语法,它为css增加了一些编程的特性,比如变量、函数、逻辑控制。css预处理器编写的css不能直接被浏览器识别,需要编译生成

为什么说无服务器是云计算的未来?

无服务器计算是一种由云提供商完全管理代码执行的体系结构,而不是传统的将开发应用程序部署到服务器上的方式。这意味着开发人员在部署代码时不必担心管理、采购和维护服务器。以前,开发人员必须考虑部署前需要多少

angular和vue之间有什么区别?

相同:1.数据绑定:vue和angular绑定都可以用{{}}2.都支持内置指令和自定义指令3.都支持内置过滤器和自定义过滤器。区别:1.学习成本和API设计:vue相比于angular来说更加的简单

css3选择器是啥意思

css3选择器是啥意思要明白css3选择器,我们首先需要知道什么是css选择器。css选择器是什么(推荐学习:CSS视频教程)●css选择器是用来规定css样式用于哪一个或哪一些dom元素的一种规范。

jquery中size()与length的区别是什么?

jQuerylength和size()区别length是属性,size()是方法。如果你只是想获取元素的个数,两者效果一样既("img").length和("img").size()获取的值是一样的。

angular和vue先学哪个?

angular和vue先学哪个?先学vue框架。其实react、angular、vue三个框架只要学会一个,短时间内掌握上手其他两个都不是较大的困难。vue相比于angular来说更加的简单。angu

angular material怎么安装?

怎么安装angularmaterial?1、前期准备:npm(安装node即可),angularcli脚手架2、自建项目ngnewmy-app//my-app项目名字 nggcproject//组件名

angular项目怎么运行?

angular项目怎么运行?1、新建一个项目。2、使用组合键【win+r】,打开运行面板,输入cmd3、打开cmd命令提示符窗口,使用cd命令进入项目所在文件夹例:cdmy-dream进入项目my-d

angular2怎么添加事件监听?

angular2怎么添加事件监听?在模板中为元素添加事件监听很简单,使用一对小括号包裹事件名称,并绑定到表达式即可:上面的代码实例为DOM对象h1的click事件添加监听函数onClick()。另一种

angular难吗?

Angular学起来难吗?答案是:不知道。准确的说应该是"因人而异"。我曾经说过:任何卖包治百病的大力丸的都是骗子,任何逢人就说一项技术很简单的也是骗子——你连对方的技术背景都不问就敢说很简单,这跟医

angular国内用的多吗?

angular在国内为什么用的人会少?大家会认为入门高,下面主观的总结了以下几点:Google没有营销好,刚开始Angular2出来的时候没有很好的照顾Angular1.x的用户,导致大量用户流失到其

Node.js 到底是什么?

Node.js是一个JavaScript的运行环境,听起来很棒,然而是什么意思呢?它又是怎么使用的呢? Node运行环境涵盖所有你运行用JavaScript编写的项目所需要的东西。如果你知道Java的

安卓被曝的严重漏洞是什么?

相信涉及用户隐私的网络安全问题,一直都是大家关注的焦点。近来,安卓被爆存在严重漏洞。那么,安卓被曝的严重漏洞到底是什么呢?原来,在安卓系统的相机App中,以色列的一家安全公司发现恶意软件可以通过存储访

华为“鸿蒙”所涉及的微内核到底是什么?一文带你认识微内核

微内核最近微内核的概念常常被大家提及,同时还有GoogleFuchisa这样的微内核新星,这里让我们一起来认识下微内核吧。背景庞大的UNIX家族计算机技术在二战后快速发展,构成计算机的主要基本单元从电

调查:企业数字化转型中面临的最大挑战是什么?

数字化转型是将新兴的数字技术集成到企业的各个方面的过程。比如最近的云迁移,其中数据和业务流程由第三方提供商管理。因此,数字化转型被视为利用技术简化运营并保持竞争力的一种方式。但Couchbase周三发

SOA架构和微服务架构的区别是什么?

来源:rrd.me/fqdANSOA架构和微服务架构的区别首先SOA和微服务架构一个层面的东西,而对于ESB和微服务网关是一个层面的东西,一个谈到是架构风格和方法,一个谈的是实现工具或组件。1.SOA

css属性是什么?

层叠样式表是一个完全的纯文本文件,通常以“css”为扩展名作为单独的文件来使用,它的内容包含了一组告诉浏览器,如何安排与显示特定的html标签中内容的规则。CSS定义规则由三个部分构成:选择符,属性和

echarts和vue的区别是什么?

echarts:ECharts,缩写来自EnterpriseCharts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/

bootstrap和vue的区别是什么?

Bootstrap是美国Twitter公司的设计师MarkOtto和JacobThornton合作基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架,使得Web开发更加快捷

css常见选择器有哪些?优先级是什么?

选择器也称为选择符,所有的html语言中的标记都是通过css选择器控制的。常见的css选择器有标签选择器、类选择器、id选择器、通配符选择器。1、标签选择器标签选择器,也称为元素选择器。标签选择器的基

ie加载不了css的原因是什么?

可能原因如下:1.HTML页面编码与CSS编码不同(如HTML为gbk,CSS为utf-8)。2.CSS文件中未指定@charset头声明,导致IE默认使用页面编码来解码CSS文件(DEMO中IE浏览