Angular 筆記 - @injectable 裝飾器與注入 HttpClient 服務元件

什麼是裝飾器

從前面元件的練習可以看到在 app.component.ts 的檔案中會有一個 Component 的裝飾器，代表裝載著這個元件資料夾內對應的路徑。

而服務元件中的裝飾器叫做 @Injectable，用來注入需要的服務元件，像之前提到的Angular 筆記 - Service 服務元件的基本認識就有出現。

除了共用的程式邏輯會使用到服務元件外，串接 API 也會需要使用服務元件，而這個服務元件在 Angular 已經建立好，稱為 HttpClient。

建立 HttpClientModule

首先先建立一個新的服務元件，名為 http.service.ts，HttpClient 是從 HttpModule 來的，要同步注入到 app.module.ts 的 imports 屬性中。

ngModule

1	imports: [BrowserModule, HttpClientModule, AppRoutingModule, FormsModule]

注意：要加入在 BrowserModule 後方才能成功使用。

注入完成後，最上方的 import 也會自動完成注入，如此就可以準備開始使用 HttpClient 服務元件了。

注入 HttpClient 服務元件

分別要 import 跟在 建構式 (constructor) 裡面注入 HttpClient 服務元件，不用自己逐字輸入，輸入關鍵幾個字就可以看到相對應的選項，必且後面要注意有 import 字樣的，就是會自動 import 到上方區域，

完成後如下圖。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class HttpService {
  constructor(private http: HttpClient) {}
}

取得 API 資料

在練習 ngFor 的時候有下載這支 API 來取得資料。

基本的 httpClient 取得使用 get() 方法，只要在 constructor 內輸入，

1	this.http.get("url");

就會把資料抓回來，在 Angular 中的 AJAX 都是非同步的，也不可能在這邊讀到取得的結果結果，還要透過一個 Rxjs 幫忙訂閱 get() 之後的結果。滑鼠移到 http 上會看到提示資料類型是一個 Observable<object> 觀察者物件資料，所有的觀察者物件都要透過一個 subscribe() 方法來訂閱其結果，

1	this.http.get("url").subscribe();

比較簡單的做法是在 subscribe 會透過一個 callback function 取得結果，其 callback 參數就是我們要取回的值，裡面要做的事情就是，這個 data 為我們帶進來的參數值。

1
2
3

this.http.get("url").subscribe((res) => {
  this.data = res;
});

完整的程式碼會是這樣，

constructor(private http: HttpClient) {
   this.http.get('url').subscribe((res) => {
     this.data = res;
     console.log(res);
   });
 }