[Angular 2] Use Service use Typescript
Angulartypescript Service use
2023-09-14 08:59:20 时间
When creating a service, need to inject the sercive into the bootstrap():
import {bootstrap, Component, View} from "angular2/angular2"; import {TodoInput} from "./todoInput"; import {TodoService} from "./todoService"; @Component({ selector:'app' }) @View({ directives: [TodoInput], template: ` <div><todo-input></todo-input></div> ` }) class App{ } bootstrap(App, [TodoService]);
todoService.js
export class TodoService{ todos: string[] = []; addTodo(value: any):void { this.todos.push(value); } }
inputTodo.js:
import {Component, View} from "angular2/angular2"; import {TodoService} from "./todoService"; @Component({ selector: 'todo-input' }) // Define a ref by using xxx-YYY // Reference a ref by using xxxYyy @View({ template: ` <input type="text" #log-me /> <button (click)="onClick($event, logMe.value)">Log Input</button> ` }) export class TodoInput{ constructor( public todoService:TodoService //pulbic make todoService global available for the class ){ console.log(todoService); } onClick(event , value){ this.todoService.addTodo(value); console.log(this.todoService.todos); } }
相关文章
- angular父子组件传值
- Angular tsconfig.json 文件里的 paths 用途
- Typescript教程_安装typescript
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
- 前端人员该怎么面试 经典Angular面试题有哪些[通俗易懂]
- angular基础面试题_java web面试题
- 关于 Angular Universal 应用执行时需要 Browser API 的问题
- 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息
- Angular Universal 应用避免 SSR hang 的一些指导方针
- Angular RouterModule.forRoot(ROUTES) 和 forChild(ROUTES)的区别
- Angular Feature Modules
- Angular 应用如何回退到之前曾经浏览过的页面
- Angular 应用里 ng-package.json 文件的作用是什么?
- Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
- 什么是 Angular library 的 secondary entry points?
- 备受 Vue、Angular 和 React 青睐的 Signals 演进史
- angular简介和其特点介绍