[Angular 2] DI in Angular 2 - 1
Orgial aritial --> Link
The problem with Angular 1 DI:
Angular 2 DI:
- Solve the singletons problem:
The service you inject to the parent component can be differnet with the one you inject to child component:
var injector = ReflectiveInjector.resolveAndCreate([Engine]); var childInjector = injector.resolveAndCreateChild([Engine]); injector.get(Engine) !== childInjector.get(Engine);
`resolveAndCreate` & `resolveAndCreateChild` are function to create injector.
Even here use the same service `Engine`, but the instances are different.
In Angular2, it looks like:
// child component @Component({ selector: 'child', providers: [Engine], template: '<h1> childcomponent !</h1>' }) class Child{ ... } // parnet component @Component({ selector: 'parent', providers: [Engine], template: '<h1> parent component !</h1>' }) class Parent { ... }
The `Engine` we inject into Child component is a new instance, which is not the same as parent one.
So what if we want to share the same instance?
Well, If child component and parent component want the same service, then we only inject servie to parent component. The child component can access parent component's injected service.
So in code, it will looks like:
// child component @Component({ selector: 'child', providers: [], template: '<h1> childcomponent !</h1>' }) class Child{ ... } // parnet component @Component({ selector: 'parent', providers: [Engine], template: '<h1> parent component !</h1>' }) class Parent { ... }
We just remove 'Engine' from Child component, now they share the same service instance.
- Solve name collision problem:
Angular 2 allows you configure the service differently:
- useClass:
provide(Engine, {useClass: OtherEngine})
2. useValue:
provide(String, {useValue: 'Hello World'})
3. useExisting:
provide(V8, {useExisting: Engine})
4. useFactory:
provide(Engine, {useFactory: () => { return function () { if (IS_V8) { return new V8Engine(); } else { return new V6Engine(); } } }})
Of course, a factory might have its own dependencies. Passing dependencies to factories is as easy as adding a list of tokens to the factory:
provide(Engine, { useFactory: (car, engine) => { }, deps: [Car, Engine] })
相关文章
- 模块化开发 Angular 应用 [含懒加载]
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
- Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
- angular基础面试题_java web面试题
- 解决angular创建项目报错:setTimeout is not defined
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- Angular 模块封装概念常见的错误理解
- 【Angular教程】-组件通信|8月更文挑战
- 【Angular教程】-内容投影u002F@ContentChildu002F@ViewChild
- 关于 Angular 应用对浏览器 Back 按钮支持问题的讨论
- Angular 项目路径添加指定的访问前缀
- Angular 应用里 server.ts 文件的 APP_BASE_HREF token 的用法?
- Web 前端框架:Angular 4.0.0 正式版发布
- MySQL查询优化:从IN中获取更高性能(mysql查询优化in)
- 子查询MySQL联表IN子查询:实现跨表快速查询(mysql联表in)
- 用法Oracle IN 用法简介(oracle的in)
- 如何在MySQL中代替IN关键字(mysql中代替in)
- 解析MySQL中IN操作符的实现原理(mysql中in的原理)
- MySQL中IN操作符的使用限制 最多能使用多少个(mysql中in的个数)
- MySQL中使用IN操作符查询字符串(mysql中in字符串)
- 避免使用MySQL中的IN操作,提升查询效率(mysql 不使用in)
- 在Oracle数据库中优化IN子句(oracle中in优化)
- 查询Oracle IN查询两个字段的精彩之处(oracle两个字段in)