[Angular 2] Using the @Inject decorator
Angular The Using Decorator Inject
2023-09-14 08:59:20 时间
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 = []; }
相关文章
- 安卓 android studio 报错 The specified Android SDK Build Tools version (27.0.3) is ignored, as it is below the minimum supported version (28.0.3) for Android Gradle
- 新建maven指定jdk版本-eclipse新建maven项目报错The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path的解决方案
- [Angular] Modify :before / :after value from Javascirpt
- [Angular] Understanding the Angular Component providers property
- [Unit Testing Angular] fakeAsync
- [Angular] Service Worker Version Management
- [Angular] Subscribing to the valueChanges Observable
- [AngularJS] Isolate State Mutations in Angular Components
- [Angular] Extract Implementation Details of ngrx from an Angular Application with the Facade Pattern
- [Angular] Read Custom HTTP Headers Sent by the Server in Angular
- [Angular] Alternative Themes - Learn the Host-Context Selector
- [Angular] Subscribing to the valueChanges Observable
- [Angular] Using the platform agnostic Renderer & ElementRef
- [Angular 2] Using a Value from the Store in a Reducer
- [Angular 2] Using ngrx/store and Reducers for Angular 2 Application State
- [AngularJS] Angular 1.5 $transclude with named slot
- (翻译)Angular.js为什么如此火呢?
- Angular如何判断某个DOM节点包含Directive
- Angular:why click add button does not work for the second time
- 二、Angular 2.0开发指南以及搭建开发环境
- Angular Component UI单元测试的隔离策略
- Error Domain=NSCocoaErrorDomain Code=518 “The file couldn’t be saved because the specified URL type
- 成功解决MSB8020 The build tools for v141 (Platform Toolset = ‘v141‘) cannot be found. To build using the
- The old instructions for getting the code