angularcli 第七篇（service 服務）

• 在組件中定義的信息是固定的，假設另外一個組件也需要用到這些信息，這時候就用到服務，實現 共享數據 和 方法

• 組件不應該直接獲取或保存數據，它們不應該了解是否在展示假數據。 它們應該聚焦於展示數據，而把數據訪問的職責委托給某個服務。

• Service 可以從任何地方獲取數據：Web 服務、本地存儲（LocalStorage）或一個模擬的數據源

 

1、創建服務到指定目錄下：    

• ng g service services / storage

 

2、app.module.ts里面引入創建的服務

• import { StorageService } from '. /service / storage.service';
• @NgModule里面的providers依賴注入服務 provides:  [ StorageService ] ,

 

3、使用的頁面引入服務、注冊服務

• import { StorageService } from '../. /service / storage.service';
• private storage : StorageService   注入到構造函數

到這里todolist 組件就可以使用 storage.service 服務里的數據了

 

例：上節todolist實現的功能（一輸入就有數據，更改狀態，刪除數據）；

　　現在要實現刷新之后輸入的數據還在（增加的數據每次刷新瀏覽器都還能保存）

每次增加數據的時候可以把數據寫入localStorage

 （1）封裝localStorage：

•  將數據寫入localStorage           localStorage.setItem
• setItem不能寫入數組或對象,所有要對value值進行轉義      JSON.stringify(value)

Storage.Service.ts界面：

export class StorageService {

  constructor() {   /*構造函數*/ }
 //將數據寫入localStorage setItem(key,value){ localStorage.setItem(key,JSON.stringify(value)) }

 //從localStorage中讀取key的值，轉換為JSON對象  getItem(key){ return JSON.parse(localStorage.getItem(key)); }
 //從localStorage中刪除key的值 removeItem(key){ localStorage.removeItem(key); } }

 

 （2）在todolist.component組件里面使用localStorage

todolist.component.ts界面：

export class TodolistComponent implements OnInit {

  public username:any='';
  public list=[];

---

//private storage:StorageService  依賴注入服務
  constructor(private storage:StorageService) { 

      console.log(this.storage);

      // this.storage.setItem('username','張三');

      // alert(this.storage.getItem('username'));
  }

---

  ngOnInit() {

      //每次刷新獲取storage里面 todolist的值

      var todolist=this.storage.getItem('todolist');
      if(todolist){
        this.list=todolist;
      }
     
  }

---

 addData(e){

    //1.從storage獲取  todolist的數據

    //2.如果有數據，拿到這個數據，然后把新數據和這個storage數據拼接，重新寫入

    //3.如果沒有數據  直接給storage寫入數據

      if(e.keyCode==13){

          var obj={  /*每次增加的一個對象數據*/
            username:this.username,
            status:1
          }

　　　　　　//1.從storage獲取todolist的數據 var todolist=this.storage.getItem('todolist');

　　　　　　//2.如果有數據，拿到這個數據，然后又把新數據和這個storage數據拼接，重新寫入
　　　　　　if(todolist){
            todolist.push(obj);
            this.storage.setItem('todolist',todolist);
            
　　　　　　//3.如果沒有數據 直接給storage寫入數據
          }else{
              var arr=[];
              arr.push(obj);
              this.storage.setItem('todolist',arr);
          }

          this.list.push(obj);
          this.username='';
      }

    // console.log(e);
  }

---

 deleteData(key){

      // alert(key);

      this.list.splice(key,1);    /*刪除數組的數據*/
  }

---

 changeData(key,status){       /*改變狀態*/

      this.list[key].status=status;

      this.storage.setItem('todolist',this.list);
  }
}

<h2>正在進行</h2>
<ul>
  <li *ngFor="let item of list;let i =index;"  [hidden]="item.status==2">
      <button  (click)="changeData(i,2)">改變數據</button>{{item.status}}-- {{item.username}}-------   <button (click)="deleteData(i)">刪除-</button>
  </li>
</ul>

<h2>已經完成</h2>
<ul>
  <li *ngFor="let item of list;let i =index;" [hidden]="item.status==1">
      <button  (click)="changeData(i,1)">改變數據</button>{{item.status}}-- {{item.username}}-------   <button (click)="deleteData(i)">刪除-</button>
  </li>
</ul>