angular2.0---服務Service，使用服務進行數據處理

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);
  }

}