zoukankan      html  css  js  c++  java
  • [Angular 2] Inject Service with "Providers"

    In this lesson, we’re going to take a look at how add a class to the providers property of a component creates an actual providers. We’ll learn what a provider specifically does and how we can provide different dependencies with the same token.

    import {Component} from 'angular2/core';
    import {TodoService} from './../services/TodoService';
    
    @Component({
        selector: 'todos',
        providers: [TodoService],
        template: `
            <div>
                <ul>
                    <li *ngFor="#todo of todoService.todos 
                        {{todo.name}}
                    </li>
                </ul>
            </div>
        `
    })
    
    export class TodoList implements OnInit{
    
        todos: Array<any>
    
        constructor(private todoService: TodoService){}
        
        ngOnInit(){
            this.todos = this.todoService.getTodos();
        }
    }
    import {Injectable} from '@angular/core';

    @Injectable()
    export class TodoService { todos = [ {id: 0, name: "eat"}, {id: 1, name: "sleep"}, {id: 2, name: "running"}, ]; getTodos(){ return this.todos; } }

    Here we use providers, which tell Angular, we want to use TodoService, create a instance for us, and so that we can use the instance. 

    providers: [TodoService],

    Actually, this is shorthard syntax, you can do:

    providers: [
     { provider: TodoService, useClass: TodoService}
    ],

    Here need to make sure, "provider" 's token are the same use "userClass", if you change "userClass" to some other service, it will still use the "TodoService":

    providers: [
     { provide: TodoService, useClass: OtherService} // still use TodoService instead
    ],

    To recap importing a data really just makes the type available, but doesn't give us an instance. In order to inject objects, we need providers that know how to create these objects by a given token which is a type.

  • 相关阅读:
    步步为营 .NET三层架构解析 六、BLL的设计
    js/jquery 获取url参数
    C# 生成XML
    Microsoft Ajax Minifier 使用综合
    公司面试题目之取出数据库中重复的记录
    关于下拉菜单(dropdownlist)一些用法心得
    数据库事务日志已满的解决办法
    Asp.Net[C#] 使用GridView 分页,编辑,删除,导出XML完整页面
    SQL Update
    如何安装ASPAJAXExtSetup.msi
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5876999.html
Copyright © 2011-2022 走看看