angular4.x创建服务（公共方法）

把多组件之间的公共数据封装成服务,然后多组件都可以进行调用其中的属性和方法

Angular4.x中的服务

• 把多组件之间的公共数据封装成服务

  1、创建storage服务

• ng g service后边如果不加文件夹会自动在app文件中生成storage.service.ts

  ng g service service/storage

• storage.service.ts

  import { Injectable } from '@angular/core';
  @Injectable({
    providedIn: 'root'
  })
  export class StorageService {
    constructor() { }
    setItem(key,value){
      localStorage.setItem(key, JSON.stringify(value));
    }
    getItme(key){
      return JSON.parse(localStorage.getItem(key));
    }
    removeItem(key){
      localStorage.removeItem(key );
    }
  }

  2、在app.module.ts里面引入创建的服务才可以用

  /*引入服务*/
  import { StorageService } from './service/new-service/storage.service';
  //注入服务
  providers: [StorageService], /*定义的服务 放在这里面*/

  3 然后再用到该服务的组件中引入和使用该服务即可

• 官方推荐引入和使用服务private依赖注入服务

  import { StorageService } from '../../service/storage.service';
  //private storage: StorageService 依赖注入服务
  export class TodoListComponent implements OnInit {
    constructor(private storage: StorageService) {
      console.log(this.storage);
      this.storage.setItem('user','王磊');
    }
  }

• 引入和使用方法二（官方不推荐使用该方法引入和使用服务）

  import { StorageService } from '../../service/storage.service';
  export class TodoListComponent implements OnInit {
    public storage = new StorageService();
    constructor() {
      console.log(this.storage);
      this.storage.setItem('user','张三');
    }
  }

赏

谢谢你请我吃糖果

支付宝

微信