angular基础二

angular搭建项目

创建服务命令

• 创建到指定目录下面 ng g service services/storage

引入注册服务

• 在app.module.ts文件下引入
  import { StorageService } from './services/storage.service'; (必需)
• 在app.module.ts文件下注册
  在@NgModule（{providers：[StorageService]）（必需）

使用

• storage = new StorageService()可以引入和使用服务 ···官方不推荐此方式
• 思路：
  1、从storage中获取所需文件的数据
  2、若有数据，则将该数据与原有storage数据拼接，重新写入
  3、若无数据，直接给storage写入数据
  假设从todolist中获取数据

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

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

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

  // storage = new StorageService()  /*可以引入服务    官方不推荐*/

  public username:any;

  public list = [];
  // private storage: StorageService  依赖注入服务
  constructor( private storage: StorageService) { 



    // this.username = ''
    console.log(this.storage);
    // this.storage.setItem('username', '张三')

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

  ngOnInit() {
    //每次刷新获取storage里面todolist的值
    var todolist = this.storage.getItem('todolist')  //判断其不为空，否则不能使用push
    if(todolist){
      this.list = todolist
    }

  }

  addData(e){


    // alert(this.username);   //双向数据绑定，获取文本框内容
    if(e.keyCode==13){

      var obj = {  /*每次增加的一个对象数据*/
        username:this.username,
        status:1
      }

      var todolist = this.storage.getItem('todolist')
      if(todolist){
        todolist.push(obj)
        //若有数据，则将该数据与原有storage数据拼接，重新写入
        this.storage.setItem('todolist', todolist)
      } else {
        //若无数据，直接给storage写入数据
        var arr = []
        arr.push(obj)
        this.storage.setItem('todolist', arr)
      }


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

  }

  deletData(key){
    // alert(key)
    this.list.splice(key,1)//删除数组的数据
  }

  changeStatus(key,status){
    this.list[key].status = status

    //改变状态后同时存入localstorage
    this.storage.setItem('todolist', this.list)
  }

}