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.

  • 相关阅读:
    Module:template
    Grunt:GruntFile.js
    Grunt:常见错误
    架构:架构-1
    架构:目录
    DS:template
    Jasper:用户指南 / 设备 / 生命周期管理 / SIM 卡状态
    Jasper-Api:接口测试
    linux服务之git
    Java实现 洛谷 P1487 陶陶摘苹果(升级版)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5876999.html
Copyright © 2011-2022 走看看