Angular中的服务 以及自定义服务

/*
1.创建服务:
ng g service services/storag

2.app.module.ts里面引入创建的服务并且声明。
import{StorageService} from "../../service/storage.service";
providers:[StorageService]

3.在用到的地方引入服务:
import{StorageService} from "../../service/storage.service";
初始化:
  constructor(public storage:StorageService) { 
    let s=this.storage.get();
    console.log(s);
  }

*/

storage.service.ts

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){
    return JSON.parse(localStorage.getItem(key));
  }
  remove(key){
    localStorage.removeItem(key);
  }
}

使用:

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

//引入服务:
import{StorageService} from "../../service/storage.service";


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

  constructor(public storage:StorageService) { 
    // let s=this.storage.get();
    // console.log(s);
  }

  ngOnInit() {
    console.log("页面刷新会触发这个生命周期函数");
    var searchlist=this.storage.get('searchlist');
    if(searchlist){
      this.historyList=searchlist;
    }
  }
  public keyword:string;
  public historyList:any[]=[];

  doSearch(){
    if(this.historyList.indexOf(this.keyword)==-1){
      this.historyList.push(this.keyword);
      this.storage.set('searchlist',this.historyList);
    }
    this.keyword=='';
    // console.log(this.keyword);
  }
  deleteHistroy(key){
    // alert(key);
    this.historyList.splice(key,1);
  }
}

 

posted @ 2020-01-03 23:18  生如逆旅,一苇以航  阅读(256)  评论(0编辑  收藏  举报