Question

4.1 服务

定义公共的方法，使得方法在组件之间共享调用

1. 创建服务命令

ng g service my-new-service

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

2. app.module.ts 里面引入创建的服务

// app.module.ts 里面引入创建的服务

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

// NgModule 里面的 providers 里面依赖注入服务

NgModule({
  declarations: [
  AppComponent,
  HeaderComponent,
  FooterComponent,
  NewsComponent,
  TodolistComponent
], imports: [
  BrowserModule,
FormsModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 使用的页面引入服务，注册服务

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

constructor(private storage: StorageService) {

}

// 使用

addData(){
   // alert(this.username);
  this.list.push(this.username); 
  this.storage.set('todolist',this.list);
}
removerData(key){
  console.log(key); 
  this.list.splice(key,1); 
  this.storage.set('todolist',this.list);
}

4.2 改造上面的 Todo、searchList

searchList

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

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

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

  public keyword: string;
  public historyList: any[] = [];

  constructor(public storage: StorageService) {
  console.log(this.storage.get());
   }

  ngOnInit() {
   // 修改的地方
  var searchlist:any=this.storage.get('searchlist');
  if(searchlist){
    this.historyList=searchlist;    
  }
  }

  doSearch(){
  if(this.historyList.indexOf(this.keyword)==-1){
    this.historyList.push(this.keyword);
    
    // 修改的地方
    this.storage.set('searchlist',this.historyList);
  }
  this.keyword = '';  
  }

  deleteHistroy(key){
    alert(key);
    this.historyList.splice(key,1);
  }

}

TODOLIST

  ngOnInit() {
  // 修改的地方
  var todolist:any=this.storage.get('todolist');

  if(todolist){
    this.todolist=todolist;    
  }
 }
doAdd(e){
  if(e.keyCode==13){
    if(!this.todolistHasKeyword(this.todolist,this.keyword)){
      this.todolist.push({
      title:this.keyword,
      status:0           //0 表示代办事项  1 表示已完成事项
      });
      this.keyword='';

      // 修改的地方
      this.storage.set('todolist',this.todolist);      //用到 this 一定要注意 this 指向
    }else{
      alert('数据已经存在');
      this.keyword='';
    }
   }
  }
 // 修改的地方
checkboxChange(){
  console.log('事件触发了');

  this.storage.set('todolist',this.todolist); 
  }

<h2>todoList</h2>
<div class="todolist">
  <input class="form_input" type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" />
  <hr>
  <h3>待办事项</h3>
  <ul>
    <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==1">
    <!-- add checkboxChange-->
     <input type="checkbox" [(ngModel)]="item.status"  (change)="checkboxChange()"/>  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>
    </li>
  </ul>
  <h3>已完成事项</h3>
  <ul>
    <li *ngFor="let item of todolist;let key=index;" [hidden]="item.status==0">
   <!-- add checkboxChange-->
     <input type="checkbox" [(ngModel)]="item.status" (change)="checkboxChange()" />  {{item.title}}   ------ <button (click)="deleteData(key)">X</button>
    </li>
    </ul>
</div>