1. 程式人生 > >Angular英雄指南教程-遇到的坑-服務注入

Angular英雄指南教程-遇到的坑-服務注入

首先給出Angular的入門示例
英雄指南教程 的連結地址(這個入門級 app 包含很多資料驅動的應用所需的特性。 它需要獲取並顯示英雄的列表、編輯所選英雄的詳情,並且在英雄資料的不同檢視之間導航。)

我的Angular CLI資訊:

Angular CLI: 1.7.4
Node: 8.9.3
OS: win32 x64
Angular:
...

在按照官網說給的示例在建立服務後並沒有下面的這個:providedIn: ‘root’,而且也不能把它寫在@Injectable註解裡面,vscode編輯器會提示@Injectable不接收任何引數。

@Injectable
({ providedIn: 'root', })

這裡寫圖片描述

直接執行會報找不到服務提供者 [NullInjectorError: No provider for HeroService!]:
這裡寫圖片描述

百度了網上各大神的解決方法,找到一個是在所需要該服務的模板中的@Component註解中加入 providers:[] 屬性進行服務注入,如下圖。如果想要在其它服務中呼叫自己的服務,可以在全域性的app.module.ts中的@NgModule標籤加入providers:[] 注入服務。

關於服務中呼叫服務這個問題,參考同事的說法可以有下面2個方法:
方法一:是在一個全域性的app.module.ts中進行註冊(如上文所述);
方法二

:新建一個module,在新建的module裡面註冊需要呼叫的(子)服務之後在全域性module中引入這個新建的module即可(因為module只能被module引用,所以不能在服務中引用module)。

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css'],
  //元件中注入服務(還可以在全域性模組(app.module.ts)中注入服務)
  providers:[
    MessageService
] })

這裡寫圖片描述