Angular学习笔记(五)之Angular服务及实现数据前端持久化

这篇笔记主要是以网上的一个视频教程为基础，记录视频中的实践操作，主要实现了一个类似于京东搜索和toDoList的操作，其中包括的知识点主要是Angular组件如何调用服务，以及通过服务实现Angular前端数据的持久化。

先看最终的效果，说明，这个只是根据视频的一个Angular的示例，前端的样式几乎没有，重点是学习Angular的知识点。

      在第一个搜索demo中，输入框中每次输入内容后，点击搜索，则下面的历史列表中会记录搜索的历史，当然也可以删除，同时数据会记录到localStorage中，页面刷新后仍然可以看到。

    第二个toDoList示例中，在输入框中输入代办事项后，回车，则在代办列表中多了条记录，勾选复选框后，代办事项变更为已办事项，同样数据会保存在localStorage中，页面刷新后，数据依然可看。

---

1、创建项目及组件

ng new angulardemo

ng g c demo/search

ng g c demo/todolist

2、编写search组件代码，这里直接贴代码：

search.component.css

h2{
  text-align: center;
}
.search{
  width: 400px;
  margin: 20px auto;
}
.search input{
  margin-bottom: 20px;
  width: 300px;
  height: 30px;
}
.search button{
  width: 80px;
  height: 32px;
}
.search ul li{
  list-style-type: none;
}

search.component.ts

import { Component, OnInit } from '@angular/core';
import {StorageService} from '../services/storage.service';

@Component({
  selector: 'app-search',
  templateUrl: './sea