[Angular 2] Understanding @Injectable
In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are preserved when transpiled to ES5, TypeScript emits metadata. In this lesson we’ll explore how the @Injectable decorator ensures metadata generation for services that have their own dependencies.
For exmaple, the TodoService looks like this:
export class TodoService { todos = [ {id: 0, name: "eat"}, {id: 1, name: "sleep"}, {id: 2, name: "running"}, ]; getTodos(){ return this.todos; } }
Now we want to inject LoggerProvider into TodoService:
import {LoggerProvider} from './LoggerProvider'; export class TodoService { todos = [ {id: 0, name: "eat"}, {id: 1, name: "sleep"}, {id: 2, name: "running"}, ]; constructor(private logger: LoggerProvider){ } getTodos(){ this.logger.debug('Items', this.todos); return this.todos; } }
If we want to the code, it will show errors:
Cannot resolve paramster in TodoService
The problem for this is because, when TypeScript code compile to ES5 code, 'LoggerProivder' is injected into the TodoService to decreator (Angular creates it).
We must provider decreator to the TodoService in order to let this class know how to handle DI. So to solve the problem, we just need to add '@Injectable' whcih provided by Angular:
import {LoggerProvider} from './LoggerProvider'; import {Injectable} from '@angular/core'; @Injectable export class TodoService { todos = [ {id: 0, name: "eat"}, {id: 1, name: "sleep"}, {id: 2, name: "running"}, ]; constructor(private logger: LoggerProvider){ } getTodos(){ this.logger.debug('Items', this.todos); return this.todos; } }
相关文章
- angular组件的基本使用
- 模块化开发 Angular 应用 [含懒加载]
- angular面试问题_kafka面试题
- 如何在Angular项目中使用MQTT
- Angular 应用里 index.html 的作用
- Angular Universal Application 应该处理 HTTP POST 请求吗?
- Angular Universal 应用避免 SSR hang 的一些指导方针
- angular框架发展史
- 关于 Angular 工程文件 angular.json 里的 inlineCritical 属性
- Angular 项目中 angular.json builder 字段的可选项介绍
- 高质量 VR 直播有望了,Google 带来 Equi-Angular Cubemaps 技术
- angular.foreach循环方法使用指南
- 使用angular写一个helloworld