首页 > 代码库 > [Angular 2] 5. Inject Service with "Providers"
[Angular 2] 5. 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(); }}
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"