angular中服务的使用

最新推荐文章于 2021-09-02 18:13:46 发布

原创最新推荐文章于 2021-09-02 18:13:46 发布 · 811 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#服务 #angular

angular 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在Angular项目中创建和使用本地存储服务，包括服务的创建、方法定义及在组件中的应用，实现数据的存储、获取和删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、创建服务

ng g service 服务名
ng g service 文件名/服务名

在这里插入图片描述
2、在app.module.ts中引入并声明服务

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

@NgModule({
  providers: [StorageService], // 配置项目所需要的服务
})

3、在服务中定义公共方法

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StorageService {
  constructor() { }
// 定义方法
  set() {
    // 存储
    window.localStorage.setItem('变量名', JSON.stringify(变量值));
  }
  get() {
    // 获取
    window.localStorage.getItem('变量名');
  }
  remove() {
    // 删除
    window.localStorage.removeItem('变量名');
  }
}

在这里插入图片描述
4、在组件中引入服务并使用方法

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

constructor(public storage: StorageService) {
    this.storage.set(); // 调用服务中的设置本地缓存数据的方法
    this.storage.get(); // 调用服务中的获取本地缓存数据的方法
    this.storage.remove(); // 调用服务中的删除本地缓存数据的方法
  }

在这里插入图片描述