場景

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項(xiàng)目入門教程：

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

Angular新建組件以及組件之間的調(diào)用：

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

通過以上搭建起Angular項(xiàng)目。

但是Angular是組建模塊式的開發(fā)，組件之間不能互相調(diào)用方法，但是可以通過創(chuàng)建服務(wù)來實(shí)現(xiàn)公共方法的調(diào)用。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號(hào)
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費(fèi)下載。

實(shí)現(xiàn)

創(chuàng)建服務(wù)命令

ng g service 服務(wù)路徑/服務(wù)名

比如這里在app/services目錄下創(chuàng)建storage服務(wù)

ng g service services/storage

?

在app.module.ts中引入創(chuàng)建的服務(wù)

在applmodule.ts中引入創(chuàng)建的服務(wù)

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

并在MgModule里面的providers里面依賴注入服務(wù)

?

在使用的頁面引入服務(wù)并注冊服務(wù)

這里在search這個(gè)組件中調(diào)用服務(wù)的方法，所以打開search這個(gè)組件的ts

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

并在構(gòu)造方法中注冊服務(wù)

constructor(private storage:StorageService) { }

?

注意這里調(diào)用的路徑，service服務(wù)與組件的位置關(guān)系如下

?

這里注冊服務(wù)時(shí)在構(gòu)造方法中private storage:StorageService，storage名字自己隨意起，后面的StorageService要與上面引入時(shí)

相對應(yīng)。

調(diào)用服務(wù)的方法

上面在要調(diào)用服務(wù)方法的ts中使用private storage:StorageService注冊服務(wù)后可以直接通過

this.storage.get();

調(diào)用其中的方法。

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

?

為了測試方法的調(diào)用，在search這個(gè)組件的ngInit方法中調(diào)用

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

?

總結(jié)

以上是生活随笔為你收集整理的Angular中怎样创建service服务来实现组件之间调用公共方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。