文章目录

- 依赖注入
- 注入器
- 服务提供商
- - @Injectable
  - 模块中的providers
  - 组件中的providers
- 单例服务
- 多级注入器
- - 例子程序结构
  - 要注入的服务定义
  - 模块定义了自己的注入器
  - 注入器树
  - 运行分析
- 注入器冒泡
下载地址

依赖注入

依赖注入（DI）是用来创建对象及其依赖的其它对象的一种方式。当依赖注入系统创建某个对象实例时，会负责提供该对象所依赖的对象（称为该对象的依赖）。

注入器

Angular 的依赖注入器负责创建服务的实例，并把它们注入到你想要注入的类中。

Angular 本身没法自动判断你是打算自行创建服务类的实例，还是等注入器来创建它。如果想通过注入器来创建，必须为每个服务指定服务提供商。

服务提供商

@Injectable

@Injectable 装饰器会指出这些服务或其它类是用来注入的。它还能用于为这些服务提供配置项。

这里我们使用类上的 @Injectable 装饰器来为 HeroService 配置了一个提供商。

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root',
})
export class HeroService {constructor() { }
}

这里providedIn 告诉 Angular，它的根注入器要负责调用 HeroService 类的构造函数来创建一个实例，并让它在整个应用中都是可用的。

模块中的providers

providers: [UserService
],

使用 UserService 这个注入令牌（injection token）注册了 UserService 类。

组件中的providers

除了提供给全应用级或特定的 @NgModule 中之外，服务还可以提供给指定的组件。在组件级提供的服务只能在该组件及其子组件的注入器中使用。

import { Component } from '@angular/core';
import { HeroService } from './hero.service';@Component({selector: 'app-heroes',providers: [ HeroService ],template: `<h2>Heroes</h2><app-hero-list></app-hero-list>`
})
export class HeroesComponent { }

单例服务

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

Angular DI 是一个多级注入系统，这意味着各级注入器都可以创建它们自己的服务实例。

多级注入器

下面通过一个例子程序来解释多级注入器

例子程序结构

上图是工程结构

上图解释了模块组件之间的关系

要注入的服务定义

定义了provideIn是root，因此它有一个根注入器

模块定义了自己的注入器

@NgModule({imports: [CommonModule,RoseRoutingModule],declarations: [CComponent, ShowComponent, BComponent],providers: [MessageService]
})
export class RoseModule { }

Rose模块通过MessageService提供商定义了自己的注入器

注入器树

一个应用中可能有多个注入器。一个 Angular 应用是一个组件树。每个组件实例都有自己的注入器！组件的树与注入器的树平行。

上图是当前的注入器树

组件A和组件App(图中未画出)共用了根注入器，而组件B和C共用了Rose模块注入器。

上面说到，在任何一个注入器中，最多只会有同一个服务的一个实例。因此，该项目当前共两个MessageService实例，且这两个实例是独立的。

运行分析

消息服务构造器中打印了一行话，用来跟踪它什么时候初始化以及初始化了几次。

启动项目后打印了一次

是因为根注入器，把它初始化了一次。

因为懒加载机制，此时还没有访问Rose模块，因此Rose模块的服务还没有被初始化。

点击A组件的add和App组件的Add按钮，可以看到，这两个组件共用同一个服务实例。

点击Rose按钮，加载Rose模块，此时Rose模块的MessageService也初始化了。
同时可以看到，Rose模块中，BC组件里里面没有任何message。

点击C组件中的Add按钮，可以看到，B组件显示的消息会和C组件保持一致，因为它们共用了同一个消息服务。

并且App组件里面显示的消息没有任何变化，说明它们所对应的消息服务是彼此独立的。

注入器冒泡

当一个组件申请获得一个依赖时，Angular 先尝试用该组件自己的注入器来满足它。如果该组件的注入器没有找到对应的提供商，它就把这个申请转给它父组件的注入器来处理。如果那个注入器也无法满足这个申请，它就继续转给它的父组件的注入器。这个申请继续往上冒泡 —— 直到找到了一个能处理此申请的注入器或者超出了组件树中的祖先位置为止。如果超出了组件树中的祖先还未找到，Angular 就会抛出一个错误。

NullInjectorError: No provider for MessageService!

下载地址

Angular6 依赖注入相关推荐

依赖注入？依赖注入是如何实现解耦的?
如何用最简单的方式解释依赖注入?依赖注入是如何实现解耦的? 第一章:小明和他的手机从前有个人叫小明小明有三大爱好,抽烟,喝酒-- 咳咳,不好意思,走错片场了.应该是逛知乎.玩王者农药和抢微信红包 ...
Spring学习－理解IOC和依赖注入
最近刚买了一本介绍ssm框架的书,里面主要对Mybatis.spring.springmvc和redis做了很多的讲解,个人觉得虽然有的内容我看不懂,但是整体上还是不错的.最近正在学习中,一边学习一边 ...
白话spring依赖注入
Spring能有效地组织J2EE应用各层的对象.Action?Service?DAO?,都可在Spring的管理下有机地协调.运行. Spring将各层的对象以松耦合的方式组织在一起,对象与对象之间没 ...
DI 依赖注入实现原理
深度理解依赖注入(Dependence Injection) 前面的话:提到依赖注入,大家都会想到老马那篇经典的文章.其实,本文就是相当于对那篇文章的解读.所以,如果您对原文已经有了非常深刻的理解,完 ...
【spring】使用构造方法依赖注入
注 : (1)使用构造方法依赖注入有两种一种是通过参数顺序一种是按照参数类型的顺序 (2)所有的依赖注入都必须拥有无参的构造方法,一开始没有添加是因为jvm会自动分配按照参数的顺序代码实现: &l ...
又一个强大的PHP5.3依赖注入容器
简单的服务容器一个简单的 php 5.3 依赖注入容器. 项目地址:https://github.com/godruoyi/easy-container Why 目前比较流行的 PHP 容器: Pi ...
Swift中依赖注入的解耦策略
原文地址:Dependency Injection Strategies in Swift 简书地址:Swift中依赖注入的解耦策略今天我们将深入研究Swift中的依赖注入,这是软件开发中最重要的技 ...
转《两个个很形象的依赖注入的比喻》
何谓控制反转(IoC = Inversion of Control),何谓依赖注入(DI = Dependency Injection)?一直都半懂不懂,今天看到两个比喻,觉得比较形象. IoC,用白 ...
php 依赖注入框架,通过实现依赖注入和路由，构建一个自己的现代化PHP框架
如何提高自己编写代码的能力呢?我们首先想到的是阅读学习优秀的开源项目,然后写一个自己的web框架或类库组件.作为web开发者,我们通常都是基于面向对象OOP来开发的,所以面向对象的设计能力或者说设计模 ...
框架依赖注入和普通依赖注入_依赖注入快速入门：它是什么，以及何时使用它...
框架依赖注入和普通依赖注入 by Bhavya Karia 通过Bhavya Karia 介绍 (Introduction) In software engineering, dependency i ...

Angular6 依赖注入