首页 > 其他 > 详细

Angular08 依赖注入

时间:2017-08-23 19:36:13      阅读:225      评论:0      收藏:0      [点我收藏+]

1 angular应用中依赖注入的工作原理

  angular会到组件的控制类中的构造器中去查看需要进行依赖注入的对象类型,然后根据这个类型到提供器中去寻找和这个类型同名的token,然后根据token后面的注册方式来创建需要的实例,最后再把这个实例赋值给构造器中对应类型的形参

  技术分享

 

2 注入器

  就是组件控制类中的构造函数

 

3 提供器

  3.1 模块配置文件中的 providers 属性

    技术分享

  3.2 组件@Component中的 providers  属性

  3.3 注意:这两种方法的用法一致,只是作用域有区别;在模块中声明是整个模块所有组件可用,在组件中声明是该组件及其子组件可用

 

4 依赖注入服务

  4.1 创建服务

    ng g service 服务名称

  技术分享

    注意:利用angular-cli创建的服务时没有添加到提供器中的,如果要使用新创建的服务器就必须先将其在提供器中进行声明

  技术分享

 

  4.2 在组件中依赖注入服务

    利用组件控制类的构造器作为注入器来实现依赖注入

    技术分享

  4.3 启动服务后报错

    报错原因:我们创建的服务还没有在提供器进行声明,所以angular应用找不到相关的服务

    技术分享

    解决办法

      在模块的提供器或者组件的提供器中对需要用到的服务进行声明

技术分享
import {BrowserModule} from ‘@angular/platform-browser‘;
import {NgModule} from ‘@angular/core‘;

import {AppComponent} from ‘./app.component‘;
import {FormsModule} from ‘@angular/forms‘;
import {HttpModule} from ‘@angular/http‘;
import { Stock01Component } from ‘./stock/stock01/stock01.component‘;
import {StockService} from ‘./shared/stock.service‘;

@NgModule({
  declarations: [ // 声明在该模块中有哪些东西(组件、指令、管道)
    AppComponent, Stock01Component
  ],
  imports: [ // 声明该模块需要正常运转时需要用到哪些模块(即:该模块依赖哪些其它模块)
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [
    StockService
    ], // 声明模块中的服务
  bootstrap: [AppComponent] // 声明该模块的主组件
})
export class AppModule {
}
View Code

  4.4 再次启动服务后angular应用运行成功

 

5 一个服务实现另外一个服务

  B服务实现A服务时,B服务必须实现A服务中的多有方法

  技术分享

 

Angular08 依赖注入

原文:http://www.cnblogs.com/NeverCtrl-C/p/7419650.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!