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