1.创建服务

打开命令窗口,cd到项目目录下,输入  ng g service myData1  回车 创建服务,如下图所示:

这样就成功创建了服务,此时,可以在项目的app文件夹下生成了两个service文件,

2.引入注册服务

服务创建好之后,要先引入注册之后才能用。

首先要在app.module.ts里:

引入     import { MyDataService } from './my-data.service';

注册      providers:[MyDataService];

app.module.ts整体代码如下:
import { NgModule }      from '@angular/core';//引入angular核心模块
import { BrowserModule } from '@angular/platform-browser'; //浏览器解析
import { FormsModule } from '@angular/forms'; // <-- NgModel lives here //引入组件
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { NewsComponent } from './components/news/news.component'; //1.引入服务 注册服务
import { MyDataService } from './my-data.service'; @NgModule({
imports: [ //配置模块 /*引入模块 请求数据模块*/
BrowserModule,
FormsModule // <-- import the FormsModule before binding with [(ngModel)]
],
declarations: [ //声明 注册 组件 所有自定义的组件都要在这里声明
AppComponent,
HeaderComponent,
NewsComponent
],
providers:[MyDataService], /*服务 工具*/
bootstrap: [ AppComponent ] //启动模块 /*加载根组件*/
})
export class AppModule { } //暴露跟模块
app.module.ts里引入注册之后,还需要在用到服务的地方引用,我写的demo是在news组件里用到了MyDataService服务,所以就在news.component.ts里引入
//要用服务 1.需要在app.module.ts 引入和注册    2.在使用的地方引入

import { MyDataService } from '../../my-data.service';

这样就可以在news.component.ts中使用MyDataService服务了;

3.使用服务

使用服务就是把服务实例化,在news.component.ts中用构造函数来实例化我们定义的服务:

  constructor(private  storage:MyDataService) {
console.log(this.storage);
this.news = this.storage.getItem('msgList') || [];
}

这样就可以使用服务了。

我这里写了一个小demo,使用服务实现数据的缓存处理:

html:

<h3>{{newsTitle}}</h3>
<input type="text" [(ngModel)]="currentMsg"><button (click)="addList()">增加+</button>
<ul>
<li *ngFor="let item of news;let key =index">
{{item}}------<button (click)="delete(key)">删除</button>
</li>
</ul>

news.component.ts:

import { Component, OnInit } from '@angular/core';

//要用服务 1.需要在app.module.ts 引入和注册    2.在使用的地方引入

import { MyDataService } from '../../my-data.service';

@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.css']
})
export class NewsComponent implements OnInit { public news = [];
public newsTitle = '填写个人信息,添加到列表';
public currentMsg; constructor(private storage:MyDataService) { this.news = this.storage.getItem('msgList') || [];
} ngOnInit() { } addList() {
this.news.push(this.currentMsg);
this.storage.setItem('msgList',this.news);
}
delete(i){
this.news.splice(i,1);
this.storage.setItem('msgList',this.news);
} }

my-data1.sevice.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class MyDataService { constructor() { } setItem(key,value){
localStorage.setItem(key,JSON.stringify(value));
}
getItem(key){
return JSON.parse(localStorage.getItem(key));
}
removeItem(key){
localStorage.removeItem(key);
} }
 

angular2.0---服务Service,使用服务进行数据处理的更多相关文章

  1. 安卓第十三天笔记-服务(Service)

    安卓第十三天笔记-服务(Service) Servcie服务 1.服务概念 服务 windows 服务没有界面,一直运行在后台, 运行在独立的一个进程里面 android 服务没有界面,一直运行在后台 ...

  2. Angular.js之服务与自定义服务学习笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service

    在 CentOS7 上将自定义的 jar 包注册为 linux 服务 service 1.在 /etc/rc.d/init.d/ 目录下创建一个名字和服务名完全相同的 shell 脚本文件 joyup ...

  4. Windows Service插件服务开源

    WindowsService 插件服务是一个为简化NTService开发和打包程序,提供插件开发的方式进行动态加入或删除业务. 插件式服务程序的由来,在系统维护的过程中,根据企业的要求经常要进行一些周 ...

  5. 安卓服务(Service)的两种开启方式以及服务的生命周期

    安卓中服务的开启方式 一:採用start的方式开启服务 调用函数:startService(Intent)->onCreate()->onStart()/onStartCommand()- ...

  6. 服务 Service 基本介绍

    Activity public class MainActivity extends ListActivity {     private boolean flag;//是否开启线程     publ ...

  7. Android服务Service总结

    转自 http://blog.csdn.net/liuhe688/article/details/6874378 富貴必從勤苦得,男兒須讀五車書.唐.杜甫<柏學士茅屋> 作为程序员的我们, ...

  8. Android学习笔记--服务(Service)

    1.服务概述 1.服务是Android四大组件之一,在使用上可以分为本地服务和远程服务,本地服务是指在不影响用户操作的情况下在后台默默的执行一个耗时操作,例如下载,音频播放等.远程服务是指可以供其他应 ...

  9. BZOJ 1820: [JSOI2010]Express Service 快递服务( dp )

    dp(i,j,k)表示在处理第i个业务, 另外2个在j,k处. 第一维可以滚动... --------------------------------------------------------- ...

随机推荐

  1. CSS3的三大特性

    在学习CSS 的时候,我们必须要熟练和理解CSS 的三大特性,那么CSS 的三大特性又是什么呢? CSS 的三大特性:层叠 继承 优先级  ,CSS 三大特性是我们学习CSS 必须掌握的三个特性. 首 ...

  2. n层满k叉树总共有多少个节点

    2叉树 1 3 7 对应公式为(2^n-1)/1 3叉树 1 4 13 对应公式为(3^n-1)/2 4叉树 1 5 21对应公式为(4^n-1)/3 ... n层k叉树,总共有(k^n-1)/k-1 ...

  3. linux,软链接配置node,npm全局命令

    sudo ln -s /usr/local/bin/node   /bin/node sudo ln -s /usr/local/bin/npm    /bin/npm 这样配置后,在root下和别的 ...

  4. sublime text ubuntu

    { "color_scheme": "Packages/User/SublimeLinter/Dawn (SL).tmTheme", "font_fa ...

  5. CSS中的层叠上下文和层叠顺序

    一.什么是层叠上下文和层叠水平 层叠上下文和层叠水平有一点儿抽象.我们可以吧层叠上下问想象成一张桌子,如果有另一个桌子在他旁边,则代表了另一个层叠上下文. Stacking context 1由文件根 ...

  6. 【数组】Search Insert Position

    题目: Given a sorted array and a target value, return the index if the target is found. If not, return ...

  7. win7、8上走网络打印机(需找驱动包,不能自动)

    不多说,直接上干货! 简而言之,就是, 第一步是,将电脑与打印机联上网,进行匹配,即连上网可以查找到打印机的型号. 第二步是,安装驱动. D:\Driver\HP LJP2015 PCL6(注意,这个 ...

  8. elasticsearch(六) 之 elasticsearch优化

    目录 elasticsearch 优化 从硬件上 : 从软件上: 从用户使用层 elasticsearch 优化 从硬件上 : 使用SSD 硬盘,解决io导致的瓶颈. 增大内存 但不超过32G(单实例 ...

  9. WPF的ControlTemplate和DataTemplate简介

    首先理清几个概念,Template.ControlTemplate.ContentTemplate.DataTemplate.ContentControl 这几个东西名字都差不多,意思感觉也接近,初次 ...

  10. ArrayList的subList方法

    参考博文使用java.util.List.subList时最好小心点 List接口中定义: List<E> subList(int fromIndex, int toIndex); 英文注 ...