angular中的服务

angular中的服务

angular中的服务相当于一个状态管理，可以将数据放在服务里面进行获取以及编辑。

服务的安装命令：

ng g service count

安装好后，会在服务的ts文件中引入一个Injectable模块，这是一个服务装饰器，可以通过@Injectable（）将一个类装饰成一个服务。

Injectable分为全局和局部：

• 局部创建：

  @Injectable（{
      provideIn:root;
  }）

  provideIn有两个值：

  root:表示只会在跟节点创建一个实例。

  null:表示会创建多个一样的实例。

• 全局创建：

  @Injectable（）

  全局创建的服务需要在app的模块文件中引入创建的服务。

  import {CountService} from "./count/count.service"

  并在providers中挂载：

  三种挂载方法：

  • 第一种方法

     providers: [
      CountService
        ]

  这样挂载时把你创建的服务完全挂载上去

  • 第二种方法

     providers: [
      {provide:CountService,useClass:NewCountService}//使用新的服务代替旧的服务
        ]

    这种方法是用新创建的服务替换旧创建的服务

  • 第三种方法

     providers: [
      {provide:CountService,useValue:{getCount(){return "只改服务中的一个方法"}}}//可以通过这个改掉服务中的一个方法
        ]

    这种方法只改变服务中指定的方法

组件使用服务：

如果是局部创建的服务，组件在使用时需要先将服务引入。

import {CountService} from "../count/count.service";

创建实例有两种方法：

• 普通创建实例：

  constructor() {
      //普通的做法
   var cs=new CountService();
   console.log(cs.getCount());
   }

• 依赖注入

  constructor(cs:CountService) {
  
  //依赖注入：就是一种创建实例的方式，通过程序创建。可以是全局的，也可以是局部的
  console.log(cs.getCount())

  }

依赖注入就是通过程序将实例创建出来，我们只需要去使用它就可以啦。

可以将创建的实例作为组件中的属性：

constructor(private cs:CountService) {
console.log(this.cs.getCount())
 }

将实例作为组件中的属性，就是在引入的时候将组件设置为私有属性

服务小案例：计数

header.component.html:

    <p>
      {{count}}
    </p>

header.component.ts:

    export class HeaderComponent implements OnInit {
      count;
      constructor(private cs:CountService) {

      }

      ngOnInit() {
      }
      ngAfterContentChecked(){
        this.count=this.cs.count;
      }

    }

服务代码：
count.service.ts:

   export class CountService {
      count=5;
      constructor() { }
      setCount(payload){
       return  this.count+=payload;
      }
    }

增加和减小按钮
add-btn.component.html:

    <p>
      <button (click)="handleChange()" >+</button>
    </p>

add-btn.component.ts:

    export class AddBtnComponent implements OnInit {
      constructor(private cs:CountService) {

      }
      ngOnInit() {
      }
      handleChange(){
             this.cs.setCount(1);
          }
    }    

减小按钮和增加一样的。

转载于:https://www.cnblogs.com/xiaojianwei/p/10093668.html