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

场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目。

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

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

创建服务命令

ng g service 服务路径/服务名

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

ng g service services/storage

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

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

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

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

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

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

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

并在构造方法中注册服务

constructor(private storage:StorageService) { }

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

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

相对应。

调用服务的方法

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

this.storage.get();

调用其中的方法。

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

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

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


 

原文地址:https://www.cnblogs.com/badaoliumangqizhi/p/12797502.html