码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular 2] 5. Inject Service with "Providers"

时间:2016-09-16 20:56:03      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:

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();
    }
}

 

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.

[Angular 2] 5. Inject Service with "Providers"

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5876999.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!