angularcli 第七篇(service 服务)

巧了我就是萌 提交于 2021-01-07 23:48:05
  • 在组件中定义的信息是固定的,假设另外一个组件也需要用到这些信息,这时候就用到服务,实现 共享数据 和 方法

  • 组件不应该直接获取或保存数据,它们不应该了解是否在展示假数据。 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。

  • 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> 

 

 

 

 

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!