[Angular 2] Using the @Inject decorator
TypeScript is used heavily as we build up our application, but TypeScript isn’t required. If you want to Inject a Service without using TypeScript, you’ll need to understand the @Inject
decorator.
main.ts:
import {Component, provide} from 'angular2/core'; import {bootstrap} from 'angular2/bootstrap'; import {TodoService} from './TodoService'; import {TodoInput} from './TodoInput'; @Component({ selector: 'app', directives: [TodoInput], template: ` <todo-input></todo-input> ` }) class App { } // []: we can inject service which can be used for the whole app // use provide to inject service, when you don't want to use TypeScript bootstrap(App, [ provide('whatever', {useClass: TodoService}) ]);
TodoInput.ts:
import {Component, Inject} from 'angular2/core'; import {TodoService} from './TodoService'; @Component({ selector: 'todo-input', template: ` <div> <input #myInput type="text"> <button (click)="onClick(myInput.value)">Click me</button> </div> ` }) export class TodoInput{ // If you don't want to use TypeScript constructor(@Inject('whatever') public todoService){ } onClick(todo: string){ this.todoService.todos.push(todo); console.log(this.todoService.todos); } }
TodoService.ts:
import {Injectable} from 'angular2/core'; @Injectable() // If you don't want to use TypeScript export class TodoService{ todos = []; }
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步