一、 IOC(控制反转)是一个概念，是把我们程序中的类与类之间的依赖关系交给容器去处理，一般有两种方式

  • 依赖查找(DL)——程序提供查找方式，交给容器去查找，常见的回调函数
  • 依赖注入——程序不提供查找方式，提供合适的构造方法或者setter方法，让容器进行注入来解决依赖关系

二、 angular中的依赖注入中有三个比较重要的概念

  • 注入器(Injector)：就像制作工厂，提供了一系列的接口用于创建依赖对象的实例
  • provider:用于配置注入器，注入器通过它来创建被依赖对象的实例，provider把标识(Token)映射到工厂方法中，被依赖的对象就是通过该方法来创建的
  • 依赖(Dependence)：指定了被依赖对象的类型，注入器会根据此类型创建对应的对象

三、依赖注入的组成图

四、angular中常见的依赖注入有

  • 组件中注入服务
  • 在服务中注入服务
  • 在模块中注入服务
  • 层级注入
  • 注入到派生组件
  • 限定方式的注入
    • 宿主组件是当前组件
    • 宿主组件是父组件

五、创建服务

服务的概念:服务是指封装单一功能，类似工具库，常被引用于组件内部，作为组件的功能扩展。可以简单理解为就是一个工具库，或者功能函数

  • 服务的组成可以是以下几种

    • 一个字符串或者json数据,比较少见
       import { Injectable } from '@angular/core';

    @Injectable()
    export class RandomService {
      public num:number;
      constructor() {
        this.num = Math.random();
       }
    }
    • 一个普通函数
    • 一个类，任何对象都可以是服务
  • 利用angular-cli创建一个服务的基本代码框架
 import { Injectable } from '@angular/core';

 @Injectable()
 export class Service1Service {

   constructor() { }

 }

说明:

  • 1、在一个项目中会把所有的服务存放在一个文件夹下存放，便于管理
  • 2、Injectable建议都带上

六、组件中注入服务的步骤

  • 1、import引入被依赖的服务
  • 2、在组件的providers中配置注入器
  • 3、在组件的构造函数声明需要注入的依赖

使用案例详细见创建服务实现组件间的通信

七、在服务中注入服务

最终服务还是要注入到组件中才能实现功能，服务中注入服务仅仅是一个服务中依赖了领导一个服务里面的方法

基本步骤

  • 1、创建第一个服务（本人案例中是创建一个打印的服务:服务名称LoginService）
  • 2、创建一个父子组件通信的服务,服务名称:ChidTofatherService
  • 3、在ChidTofatherService服务中import引入LoginService服务
  • 4、在ChidTofatherService服务中的构造函数中注入所依赖的LoginService服务
  • 5、在使用的组件中的providers中注册该依赖的服务
  • 6、在ChidTofatherService服务中调用LoginService服务的方法

基本如下:

  • 1、LoginService服务代码
    import { Injectable } from '@angular/core';
    @Injectable()
    export class LoginService {

        constructor() { }

        public info(message:any){
            console.info(message);
        }

        public warn(message:any){
            console.warn(message);
        }

        public error(message:any){
            console.error(message);
        }
    }
  • 2、ChidTofatherService服务代码
    import { Injectable } from '@angular/core';
    import {LoginService} from "./login.service";
    @Injectable()
    export class ChidTofatherService {
      list:string[] = [];
      //在构造函数中注入所依赖的服务
      constructor(private _login:LoginService) { }
      append(str:any){
        this._login.info(`你输入的是:${str}`);
        this.list.push(str);
      }
    }
  • 3、FatherComponent组件注册服务
    ....
    @Component({
      selector: 'app-father',
      templateUrl: './father.component.html',
      styleUrls: ['./father.component.css'],
      providers:[ChidTofatherService,LoginService]
    })
    ....

八、在模块中注入服务

angular项目中都有一个根模块app.module.ts中的providers中注入

import ...
@NgModule({
  ...
  providers: [],
  bootstrap: [AppComponent]
})

本人不建议志记载根模块中注入服务，比较麻烦，先在这注入了，在使用的组件中还要在构造函数中注入

九、层级注入

层级注入常常用于在父子组件中，一个父组件可能有多个子组件，如果是每个子组件中都注入一个服务，那么每个子组件都实例了该服务，类似于每个子组件就是一个类实例的对象，互不冲突，如果注入到父组件中，那么所有的子组件具有相同的实例对象。使用方式与组件注入的方式一样的。angular查找服务的方式有点跟函数查找作用域类似，先从本身开始查找，如果本身没有就会继续往父组件查找，直到根模块结束查询

十、注入到派生组件

我们创建组件是export class 组件名称...那么我们组件就是一个类，既然是类，那么就有类的:封装、继承、多态,所谓的派生组件就是一个继承父组件的子组件

注意点:

  • 1、派生组件不能继承父组件的注入器
  • 2、父组件与派生组件之间没有任何关联
  • 3、父组件注入的服务，那么派生组件也必须注入父组件依赖的服务
  • 4、在派生组件中的constructor中使用super(...)往组件中传递

十一、demo下载地址