Angular中怎样创建service服务来实现组件之间调用公共方法

时间:2022-05-15 00:50:34


场景


通过以上搭建起Angular项目。

但是Angular是组建模块式的开发,组件之间不能互相调用方法,但是可以通过创建服务来实现公共方法的调用。

注:

关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

创建服务命令

ng g service 服务路径/服务名

比如这里在app/services目录下创建storage服务

ng g service services/storage

 

在app.module.ts中引入创建的服务

在applmodule.ts中引入创建的服务

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

并在MgModule里面的providers里面依赖注入服务

Angular中怎样创建service服务来实现组件之间调用公共方法

 

在使用的页面引入服务并注册服务

这里在search这个组件中调用服务的方法,所以打开search这个组件的ts

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

并在构造方法中注册服务

constructor(private storage:StorageService) { }

 

Angular中怎样创建service服务来实现组件之间调用公共方法

注意这里调用的路径,service服务与组件的位置关系如下

 

Angular中怎样创建service服务来实现组件之间调用公共方法

这里注册服务时在构造方法中private storage:StorageService,storage名字自己随意起,后面的StorageService要与上面引入时

相对应。

调用服务的方法

上面在要调用服务方法的ts中使用private storage:StorageService注册服务后可以直接通过

this.storage.get();

调用其中的方法。

get()方法需要提前在service中提前声明

Angular中怎样创建service服务来实现组件之间调用公共方法

 

为了测试方法的调用,在search这个组件的ngInit方法中调用

ngOnInit(): void {
this.storage.get();
}

 

Angular中怎样创建service服务来实现组件之间调用公共方法