深入理解Angular4中的依赖注入

在Angular中使用依赖注入，可以帮助我们实现松耦合，可以说只有在组件中使用依赖注入才能真正的实现可重用的组件。
如果我们有个服务product.service.ts，其中export了一个ProductService类，类中有一个getProduct方法。

如果不使用依赖注入，假设我们需要在product组件中使用这个服务时就会new一个ProductService类，但如果这个组件被用到了另一个地方，需要的服务改变了，我们就不得不更改组件中的内容，这样的组件不能说是可复用的。

一、注入器

Angular中的注入器只有一种实现方法就是在构造函数中声明。

例如在一个组件中

constructor(productService: ProductService){}

通俗的讲这段代码的意思就是说，这个组件创建了一个productService，而这个productService是依赖ProductService的，这里的ProductService只是一个token，至于ProductService 是什么，是怎么实现的，全都是由提供器说明的。

二、提供器

通常提供器定义在应用级，及app.module.ts中，供所有组件或服务使用，当然也可以定义在某一个组件中，只供这一个组件使用。

我们以定义在应用级为例：

@NgModule({
  provides:[ProductService]
})

这段代码其实这一个简写，全写为：

@NgModule({
  provides:[{
    provide: ProductService,
    useClass:ProductService
  }]
})

这段代码中的provide声明的就是我们刚刚在注入器中提过的token，就是说这两个token是一一对应的，Angular会到提供器中找到和注入器相同的token.

代码中的useClass是实例化ProductService类，及我们帮助我们new 了一个类出来。除了useClass外，比较常用的还用useFactory,使用工厂模式实例化一个类。

这时候我们在组件中就可以直接使用ProductService类中的方法了。

当token和想要实例化的类名字相同时，我们就可以使用上面那种简写的方法。

说了这么多，那到底怎么才能体现出可复用性呢？

如果现在我们的product组件用到了另一个地方需要使用另一个服务，我们命名为AnotherProductService。有了依赖注入我们就不必要更改组件，而是更改app.module.ts中的提供器：

@NgModule({
  provide: ProductService,
  useClass: AnotherProductService
})

从这段代码可以看出，token并没有改变，可是这是实例化的类变为了AnotherProductService。

总结来说，当组件在构造函数中说明自己想要依赖一个类时，Angular首先会在这个组件自身找有没有提供器，如果没有就去这个组件的父组件中找，如果也没有找到就去应用级（app.module.ts）中找。找到后，就会按照提供器可说明的为组件注入它想要的。

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

赞 (0)

相关推荐

  • Angular 4依赖注入学习教程之InjectToken的使用（八）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之FactoryProvider配置依赖对象（五）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之ClassProvider的使用（三）

    Angular 4依赖注入学习教程之ClassProvider的使用（三）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之ValueProvider的使用（七）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之Injectable装饰器（六）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之组件服务注入（二）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4依赖注入学习教程之简介（一）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • Angular 4 依赖注入学习教程之FactoryProvider的使用（四）

    学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

  • 深入理解Angular4中的依赖注入

    在Angular中使用依赖注入,可以帮助我们实现松耦合,可以说只有在组件中使用依赖注入才能真正的实现可重用的组件. 如果我们有个服务product.service.ts,其中export了一个ProductService类,类中有一个getProduct方法. 如果不使用依赖注入,假设我们需要在product组件中使用这个服务时就会new一个ProductService类,但如果这个组件被用到了另一个地方,需要的服务改变了,我们就不得不更改组件中的内容,这样的组件不能说是可复用的. 一.注入器

  • 理解Spring中的依赖注入和控制反转

    理解Spring中的依赖注入和控制反转

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家分享网上的一些技术大牛们对Spring框架的IOC的理解以及谈谈我对Spring Ioc的理解. IoC是什么 Ioc-InversionofControl,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不是传统的在你的对象内

  • 深入理解Angular中的依赖注入

    深入理解Angular中的依赖注入

    一.什么是依赖注入 控制反转(IoC) 控制反转的概念最早在2004年由Martin Fowler提出,是针对面向对象设计不断复杂化而提出的一种设计原则,是利用面向对象编程法则来降低应用耦合的设计模式. IoC强调的是对代码引用的控制权由调用方转移到了外部容器,在运行是通过某种方式注入进来,实现了控制反转,这大大降低了程序之间的耦合度.依赖注入是最常用的一种实现IoC的方式,另一种是依赖查找. 依赖注入(Dependency Injection) 当然,按照惯例我们应该举个例子, 哦对,我们主要

  • 详解C#中的依赖注入和IoC容器

    详解C#中的依赖注入和IoC容器

    在本文中,我们将通过用C#重构一个非常简单的代码示例来解释依赖注入和IoC容器. 简介: 依赖注入和IoC乍一看可能相当复杂,但它们非常容易学习和理解. 在本文中,我们将通过在C#中重构一个非常简单的代码示例来解释依赖注入和IoC容器. 要求: 构建一个允许用户查看可用产品并按名称搜索产品的应用程序. 第一次尝试: 我们将从创建分层架构开始.使用分层架构有多个好处,但我们不会在本文中列出它们,因为我们关注的是依赖注入. 下面是应用程序的类图: 首先,我们将从创建一个Product类开始: pub

  • 理解ASP.NET Core 依赖注入(Dependency Injection)

    目录 依赖注入 什么是依赖注入 依赖注入有什么好处 ASP.NET Core内置的依赖注入 服务生存周期 服务释放 TryAdd{Lifetime}扩展方法 解析同一服务的多个不同实现 Replace && Remove 扩展方法 Autofac 服务解析和注入 构造函数注入 方法注入 属性注入 一些注意事项 框架默认提供的服务 依赖注入 什么是依赖注入 简单说,就是将对象的创建和销毁工作交给DI容器来进行,调用方只需要接收注入的对象实例即可. 微软官方文档-DI 依赖注入有什么好处 依赖

  • Quarkus中的依赖注入DI和面向切面aop编程

    目录 前言 JSR365:Java2.0的上下文和依赖注规范 Bean声明和依赖注入 Bean的生命周期 条件化初始Bean 面向切面编程aop Bean列表接口 结语 前言 做java开发的肯定清楚spring中的核心思想ioc和aop,ioc即控制反转的意思,di的核心思想和ioc一样,描述的也是同一个事情同一个思想,只是di的依赖注入更容易被理解了,aop即面向切面,如注解事务功能,就是基于aop的思想来实现的.Quarkus中也实现了一套非标准的cdi规范,下面就来看看Quarkus中的

  • 详解ASP.NET Core 在 JSON 文件中配置依赖注入

    详解ASP.NET Core 在 JSON 文件中配置依赖注入

    前言 在上一篇文章中写了如何在MVC中配置全局路由前缀,今天给大家介绍一下如何在在 json 文件中配置依赖注入. 在以前的 ASP.NET 4+ (MVC,Web Api,Owin,SingalR等)时候,都是提供了专有的接口以供使用第三方的依赖注入组件,比如我们常用的会使用 Autofac.Untiy.String.Net 等,这些第三放依赖注入组件基本上都提供了一套配置注入或者配置生命周期的方式,除了直接配置到类里面之外,还提供了要么使用 xml 文件,要么使用 json 等,那么在新的

  • JavaScript中的依赖注入详解

    JavaScript中的依赖注入详解

    计算机编程的世界其实就是一个将简单的部分不断抽象,并将这些抽象组织起来的过程.JavaScript也不例外,在我们使用JavaScript编写应用时,我们是不是都会使用到别人编写的代码,例如一些著名的开源库或者框架.随着我们项目的增长,我们需要依赖的模块变得越来越多,这个时候,如何有效的组织这些模块就成了一个非常重要的问题.依赖注入解决的正是如何有效组织代码依赖模块的问题.你可能在一些框架或者库种听说过"依赖注入"这个词,比如说著名的前端框架AngularJS,依赖注入就是其中一个非常

  • php中的依赖注入实例详解

    本文实例讲述了php中的依赖注入.分享给大家供大家参考,具体如下: 依赖注入是一种允许我们从硬编码的依赖中解耦出来,从而在运行时或者编译时能够修改的软件设计模式. 我到现在依然不大明白上面"依赖注入"的定义是什么-- 有兴趣可以参考下<PHP之道>上面对"依赖注入"的 解释. http://laravel-china.github.io/php-the-right-way/#dependency_injection 简而言之就是可以让我们在类的方法中更加

  • React 源码中的依赖注入方法

    React 源码中的依赖注入方法

    一.前言 依赖注入(Dependency Injection)这个概念的兴起已经有很长时间了,把这个概念融入到框架中达到出神入化境地的,非Spring莫属.然而在前端领域,似乎很少会提到这个概念,难道前端的代码就不需要解耦吗?前端的代码就没有依赖了?本文将以 React 的源码为例子,看看它是如何使用依赖注入这一设计模式的. 二.依赖注入的基本概念 在看代码之前,有必要先简单介绍一下依赖注入的基本概念.依赖注入和控制反转(Inversion of Control),这两个词经常一起出现.一句话表

随机推荐