Angular开发(十七)-angular中的依赖注入

---

一、 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下载地址