zoukankan      html  css  js  c++  java
  • [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;
        }
    }
  • 相关阅读:
    2019年2月14日训练日记
    定制你的WordPress
    打造你的专属埃菲尔塔
    【DIY】打造一个六足蜘蛛机器人
    【数据结构专题-03】树
    【数据结构专题-02】算法介绍
    【数据结构专题-01】数据结构基本介绍
    【DIY】制作一个刷卡进门装置
    【Java实战】Java实现简易音乐播放器
    【Java实战】Java实现简易坦克对战小游戏
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5877838.html
Copyright © 2011-2022 走看看