Angular学习系列四：组件调用服务

基于上一篇内容，先打开vscode终端

1：创建服务： ng g service services/storage

2：数据双向绑定记得引用form moduler, 使用服务记得要引用服务，如下：

     在app.module.ts中,引入并配置服务: 

     import { StorageService } from './services/storage.service';   

     providers: [StorageService]

   

2： 具体组件引用具体服务

　　比如先建todolist组件后，需要引入：import { StorageService } from '../../services/storage.service'; 并且在构造函数中注入该服务

 

3: 实现目标：组件调用服务，数据采用local storage持久化，初始ngOnInit生命周期

 

todolist 界面code:

 

<p>todolist works!</p>
<table>
    <tr>
        <td>
            <input type='text' [(ngModel)]="searchValue" />
            <button (click)="doSearch()">search</button>
        </td>
        <td>            
        </td>
    </tr>
    <tr>
        <td>
             搜索展示：
        </td>
        <td>
            <ul>
                <li *ngFor="let item of historyList;let key = index;">
                    {{item}}
                    <button (click)="deleteHistory(key)">X</button>
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>
            按enter添加代办事项： <input type='text' [(ngModel)]="doValue" (keyup)="doAdd($event)"/>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
             代办事：
             <ul>
                <li *ngFor="let item of doList;let key = index;" [hidden]="item.status">
                    <input type="checkbox" [(ngModel)]="item.status"  (change)="changeStatus()">
                    {{item.value}}
                  <button (click)="deleteDo(key)">X</button>
                </li>
            </ul>
        </td>
        <td>
            已办事项：
            <ul>
                <li *ngFor="let item of doList;let key = index;" [hidden]="!item.status">
                    <input type="checkbox" [(ngModel)]="item.status" >
                    {{item.value}}                  
                </li>
            </ul>
        </td>
    </tr>
</table>

todolist typescript代码：

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

//组件调用服务：
import { StorageService } from '../../services/storage.service';

//可以使用，但是不推荐
//var storageObj = new StorageService();

@Component({
  selector: 'app-todolist',
  templateUrl: './todolist.component.html',
  styleUrls: ['./todolist.component.css']
})
export class TodolistComponent implements OnInit {

  public searchValue: string = "";
  public historyList: any[] = [];

  public doValue: string = "";
  public doList: any[] = [];
  constructor(public storageObj: StorageService) {
    //console.log(storageObj);

  }

  ngOnInit() {
    console.log("每次页面刷新会触发该生命周期函数");
    this.historyList = this.storageObj.get("searchList");
    this.doList = this.storageObj.get("todoList");
  }

  doSearch() {
    if (this.historyList.indexOf(this.searchValue) == -1) {
      this.historyList.push(this.searchValue);
      this.storageObj.set("searchList", this.historyList);
    }

    this.searchValue = "";
    console.log(this.searchValue);
  }

  deleteHistory(key) {
    console.log(key);
    this.historyList.splice(key, 1);//从key位置删除1个值
    this.storageObj.set("searchList", this.historyList);
  }



  doAdd(event) {
    //console.log(event);
    if (event.keyCode == 13) {
      if (!this.todolistHasValue(this.doList, this.doValue)) {
        this.doList.push({
          value: this.doValue,
          status: false,  //false：未做事 true:已完成
        });
        this.storageObj.set("todoList",this.doList);
        this.doValue = "";
      } else {
        alert("数据存在");
      }
    }
  }

  deleteDo(key) {
    this.doList.splice(key, 1);
    this.storageObj.set("todoList",this.doList);
  }

  //判存
  todolistHasValue(curdolist: any, curvalue: any) {

    for (var i = 0; i < curdolist.length; i++) {
      if (curdolist[i].value == curvalue) {
        return true;
      }
    }

    //异步，判存失败
    // curdolist.forEach(ele => {
    //   if (ele.value == curvalue) {
    //     return true;
    //   }
    // });
    return false;
  }

  changeStatus(){
    this.storageObj.set("todoList",this.doList);
  }
}

storage服务代码：

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

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor() { }

  set(key:string, value:any) {

    localStorage.setItem(key, JSON.stringify(value));
  }

  get(key:string) {

    return JSON.parse(localStorage.getItem(key));
  }
  remove(key:string) {
    localStorage.removeItem(key);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

//引入表单组件才能双向绑定
import {FormsModule} from '@angular/forms';

//引入并配置服务
import { StorageService } from './services/storage.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FormComponent } from './components/form/form.component';
import { TodolistComponent } from './components/todolist/todolist.component';

@NgModule({
  //组件
  declarations: [
    AppComponent,
    HeaderComponent,
    FormComponent,
    TodolistComponent
  ],
  //模块
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  //服务
  providers: [StorageService],//配置
  bootstrap: [AppComponent]
})


export class AppModule { }

界面效果图：