首页 > 其他 > 详细

Angular服务

时间:2020-03-20 21:25:05      阅读:58      评论:0      收藏:0      [点我收藏+]

Angular服务的使用

 

 

1,创建服务

 

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

 

技术分享图片

 

 

 

2,使用服务

 

  • 在app.module.ts中引入并声明服务  

 

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

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

 

  • 在服务中定义公共的方法  

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(‘变量名‘);
  }
}

 

  • 在组件中引入服务并且使用服务中的方法

  

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

constructor(public storage: StorageService) {

    this.storage.set(); // 调用服务中的设置本地缓存数据的方法

    this.storage.get(); // 调用服务中的获取本地缓存数据的方法

    this.storage.remove(); // 调用服务中的删除本地缓存数据的方法

}

 

Angular服务

原文:https://www.cnblogs.com/zxuedong/p/12534662.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!