Angular服务的使用（以localStorage为例）
文章目录
-
-
- Angular中的服务
- 创建服务命令
- 引入并配置服务
- 其他组件使用服务
- 以localStorage为例实现
-
Angular中的服务
angular是基于模块化、组件化的开发方式，默认情况下组件中无法互相调用方法，有一些公共功能可以封装在服务里。想在哪个组件里用公共的方法，就可以从服务中直接引入。
在vue中就是自己直接新建一个文件夹，里面写上js文件，exports出来，再在需要用到的.vue文件的script标签中import。没有像angular这样可以通过cli创建。
创建服务命令
可以通过angular的cli来创建，例如在services文件夹下创建数据持久化的服务
ng g service services/storage
忘记命令的话，直接敲ng g就会有提示
引入并配置服务
在根模块中app.module.ts引入
import {
StorageService } from './services/storage.service'; // 引入
@NgModule({
providers: [StorageService], // 配置
})
打开服务storage.service.ts
export class StorageService {
constructor() {
}
get(): string {
// 加一个简单方法测试
return 'this is a service';
}
}
其他组件使用服务
在哪里用，还需要在那里引入，随便打开一个之前创建好的组件，比如form中增加如下
// 引入服务
import {
StorageService } from '../../services/storage.service';
export class FormComponent implements OnInit {
// 修改构造函数
constructor(public storage: StorageService) {
// 此处可理解为在外面创建一个public storage，然后在传参里将StorageService赋值为storage
const s = this.storage.get();
console.log(s)
}
}
【注意】必须加public
以localStorage为例实现
继续借用之前实现了的表单组件，改写一下
<h2>人员登记系统h2>
<div class="people_list">
<ul>
<li>姓名：<input type="text" class="name" [(ngModel)]="peopleInfo.userName"/>li>
<li>性别：
<input type="radio" class="sex" value="1" name="sex" id="male" [(ngModel)]="peopleInfo.sex"/> <label for="male">男label>
<input type="radio" class="sex" value="2" name="sex" id="female" [(ngModel)]="peopleInfo.sex"/> <label for="female">女label>
li>
<li>
城市：
<select name="city" id="city" [(ngModel)]="peopleInfo.city" class="city">
<option [value]="item" *ngFor="let item of peopleInfo.cityList">{
{item}}option>
select>
li>
<li>
爱好：
<span *ngFor="let item of peopleInfo.hobbies; let key=index">
<input type="checkbox" class="hobby" [id]="'check'+ key" [(ngModel)]="item.checked"/>
<label [for]="'check'+key">{
{item.title}}label>
span>
li>
<li class="remark">
<span class="remark_title">备注：span>
<textarea name="remark" id="remark" cols="30" rows="10" class="remark_area" [(ngModel)]="peopleInfo.remark">textarea>
li>
ul>
<button (click)="doSubmit()" class="subButton">提交表单内容button>
<button (click)="getHistory()" class="subButton">获取历史数据button>
<br>
<br>
<br>
<pre>
{
{peopleInfo | json}}
pre>
div>
ts里，加星号的是新加的
import {
Component, OnInit } from '@angular/core';
// 引入服务***
import {
StorageService } from '../../services/storage.service';
// const storage = new StorageService(); //也可以、不推荐
// 然后在constructor中使用
@Component({
selector: 'app-form',
templateUrl: './form.component.html',
styleUrls: ['./form.component.scss']
})
export class FormComponent implements OnInit {
public peopleInfo: any = {
userName: 'name',
sex: '1',
cityList: ['北京', '上海', '深圳'],
city: '北京',
hobbies: [
{
title: '吃饭',
checked: false
},
{
title: '睡觉',
checked: false
},
{
title: '养花',
checked: false
}
],
remark: '',
};
constructor(public storage: StorageService) {
// *****
}
ngOnInit(): void {
}
doSubmit(): void {
// 双向数据绑定获取表单数据
// 为了演示localStorage和服务，在这里把数据存进localStorage
console.log('store')
this.storage.set('peopleInfo', this.peopleInfo); // ***
}
getHistory(): void {
// ****
// 从localStorage中取出数据
console.log('get')
this.peopleInfo = this.storage.get('peopleInfo');
}
}
css不贴了，可从上一篇复制从头学Angular
storage.service.ts
import {
Injectable } from '@angular/core';
import {
JsonPipe } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class StorageService {
// 封装一个localStorage服务
constructor() {
}
set(key: string, value: any): void {
localStorage.setItem(key, JSON.stringify(value)); // 只能是字符串
}
get(key): any {
return JSON.parse(localStorage.getItem(key));
}
remove(key): void {
localStorage.removeItem(key);
}
}
效果如下：
填写后点击提交表单内容按钮，内容存储到右侧的localStorage中
此时再写新的数据，但点击获取历史数据按钮，表单又会回到之前的数据