angular中的服务

时间:2021-07-25 03:15:02

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);
}
}

减小按钮和增加一样的。