13518219792
网站建设资讯

NEWS

网站建设资讯

angular依赖注入实例分析

这篇“angular依赖注入实例分析”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“angular依赖注入实例分析”文章吧。

创新互联专注于濮阳县网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供濮阳县营销型网站建设，濮阳县网站制作、濮阳县网页设计、濮阳县网站官网定制、微信小程序开发服务，打造濮阳县网络公司原创品牌,更为您提供濮阳县网站排名全网营销落地服务。

angular依赖注入实例分析

angular中的依赖注入（DI）

1、概述

依赖注入 ( Dependency Injection ) 简称DI，是面向对象编程中的一种设计原则，用来减少代码之间的耦合度。

class MailService {
  constructor(APIKEY) {}
}

class EmailSender {
  mailService: MailService
  constructor() {
    this.mailService = new MailService("APIKEY1234567890")
  }

  sendMail(mail) {
    this.mailService.sendMail(mail)
  }
}

const emailSender = new EmailSender()
emailSender.sendMail(mail)

EmailSender 类运行时要使用 MailService 类，EmailSender 类依赖 MailService 类，MailService 类是 EmailSender 类的依赖项。

以上写法的耦合度太高，代码并不健壮。如果 MailService 类改变了参数的传递方式，在 EmailSender 类中的写法也要跟着改变。

class EmailSender {
  mailService: MailService
  constructor(mailService: MailService) {
    this.mailService = mailService;
  }
}
const mailService = new MailService("APIKEY1234567890")
const emailSender = new EmailSender(mailService)

在实例化 EmailSender 类时将它的依赖项通过 constructor 构造函数参数的形式注入到类的内部，这种写法就是依赖注入。

通过依赖注入降了代码之间的耦合度，增加了代码的可维护性。MailService 类中代码的更改再也不会影响 EmailSender 类。

2、DI 框架

Angular 有自己的 DI 框架，它将实现依赖注入的过程隐藏了，对于开发者来说只需使用很简单的代码就可以使用复杂的依赖注入功能。

在 Angular 的 DI 框架中有四个核心概念：

  • Dependency：组件要依赖的实例对象，服务实例对象

  • Token：获取服务实例对象的标识

  • Injector：注入器，负责创建维护服务类的实例对象并向组件中注入服务实例对象（管理服务对象的创建和获取）。

  • Provider：配置注入器的对象，指定创建服务实例对象的服务类和获取实例对象的标识。（Provider：提供程序）

2.1 注入器 Injectors

注入器负责创建服务类实例对象，并将服务类实例对象注入到需要的组件中。

  • 创建注入器

    import { ReflectiveInjector } from "@angular/core"
// 服务类
class MailService {}
// 创建注入器并传入服务类
const injector = ReflectiveInjector.resolveAndCreate([MailService])

  • 获取注入器中的服务类实例对象

    const mailService = injector.get(MailService)

  • 服务实例对象为单例模式，注入器在创建服务实例后会对其进行缓存

    const mailService1 = injector.get(MailService)
const mailService2 = injector.get(MailService)

console.log(mailService1 === mailService2) // true

  • 不同的注入器返回不同的服务实例对象

    const injector = ReflectiveInjector.resolveAndCreate([MailService])
const childInjector = injector.resolveAndCreateChild([MailService])

const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)

console.log(mailService1 === mailService2) // false

  • 服务实例的查找类似函数作用域链，当前级别可以找到就使用当前级别，当前级别找不到去父级中查找

    const injector = ReflectiveInjector.resolveAndCreate([MailService])
const childInjector = injector.resolveAndCreateChild([])

const mailService1 = injector.get(MailService)
const mailService2 = childInjector.get(MailService)

console.log(mailService1 === mailService2) // true

2.2 提供者 Provider

  • 配置注入器的对象，指定了创建实例对象的服务类和访问服务实例对象的标识。

    const injector = ReflectiveInjector.resolveAndCreate([
  { provide: MailService, useClass: MailService }
])

  • 访问依赖对象的标识也可以是字符串类型

    const injector = ReflectiveInjector.resolveAndCreate([
  { provide: "mail", useClass: MailService }
])
const mailService = injector.get("mail")

  • useValue

    const injector = ReflectiveInjector.resolveAndCreate([
  {
    provide: "Config",
    useValue: Object.freeze({
      APIKEY: "API1234567890",
      APISCRET: "500-400-300"
    })
  }
])
const Config = injector.get("Config")

将实例对象和外部的引用建立了松耦合关系，外部通过标识获取实例对象，只要标识保持不变，内部代码怎么变都不会影响到外部。

以上就是关于“angular依赖注入实例分析”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。


网页题目：angular依赖注入实例分析
网页URL：http://njwzjz.com/article/gojgop.html

其他资讯