首页 > 代码库 > angular2 学习笔记 ( DI 依赖注入 )
angular2 学习笔记 ( DI 依赖注入 )
refer :
http://blog.thoughtram.io/angular/2016/09/15/angular-2-final-is-out.html ( search Dependency Injection )
小说明 :
大致流程 : 把 providers 写入 injector, 然后通过 injector 来注入 service.
单列 : 一个 service 在一个 injector 里是单列.
查找逻辑 : injector 有父子关联, 如果子 injector 没有发现 provider 那么它会去父 injector 找, 和 js prototype 差不多概念.
component + DI : angular2 为每一个 component 创建了 injector, 然后它们有父子串联的关系.
4 种方式设置 providers
1. useClass
providers: [{ provide: AppService, useClass: AppService }]providers: [AppService]
如果, provide 和 useClass 是同一个那么可以像第2个那样缩写哦.
2.useValue, 当 service 不是一个 class 对象, 就可以用这个, stringOrToken 之后讲.
@Component({ selector: ‘my-app‘, template: ‘<h1>My First Angular App</h1>‘, providers: [{ provide : "stringOrToken", useValue : "xxx" }]})export class AppComponent { constructor( @Inject("stringOrToken") private service: string) {} ngOnInit() { console.clear(); console.log(this.service); //xxx }}
3. useExisting
用途 refer : http://blog.thoughtram.io/angular/2016/09/14/bypassing-providers-in-angular-2.html
@Component({ selector: ‘my-app‘, template: ‘<h1>My First Angular App</h1>‘, providers: [ { provide: "stringOrToken", useValue: "xxx" }, { provide: "otherString", useExisting: "stringOrToken" } ]})export class AppComponent { constructor( @Inject("otherString") private service: string) {} ngOnInit() { console.clear(); console.log(this.service); //xxx }}
简单说就是让你用不同的 "名字" 调用同一个 service.
4. useFactory
@Component({ selector: ‘my-app‘, template: ‘<h1>My First Angular App</h1>‘, providers: [ AppService, { provide: "stringOrToken", useFactory: (appService) => { console.log(appService); return "zzz"; }, deps: [AppService] //这里只能是简单的 class 注入哦, 不是无限嵌套哦 } ]})export class AppComponent { constructor( @Inject("stringOrToken") private service: string) {} ngOnInit() { console.clear(); console.log(this.service); //zzz }}
@inject() 和
angular2 学习笔记 ( DI 依赖注入 )
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。