AngularでPOSTでデータ送信するには、HttpClient.post() メソッドを使います。
GETとそんなに変わらないですが、引数が1つ増えてます。
Book というクラスのデータを送信したければ以下のようにします。(Bookは自分で定義したクラスです)
import { Injectable } from '@angular/core'; import { Book } from './book'; import { Observable, of } from 'rxjs'; import { HttpClient } from '@angular/common/http'; export class BookService { private booksUrl = 'https://hogehoge.com/api/books'; createBook(book: Book): Observable<Book> { // APIのURL、送信したいデータを指定してpost()を呼び出す。 return this.http.post<Book>(`${this.booksUrl}`, book); } }
コンポーネント側はGETと同様に呼び出せばOK。
createBook(book: Book): void { this.bookService.createBook(book) .subscribe(book => { console.log('create book:'+book); }); }
以上です。
逆引きAngular目次
ngコマンド(Angular CLI)
Angularアプリケーションを起動する(ng serve)
Angularアプリケーションをビルドする(ng build)
Angularでファイルが変更されたら自動的にビルドする(ng build –watch)
Angularのコンポーネントを追加する(ng generate component [コンポーネント名])
Angularのサービスを追加する(ng generate service [サービス名])
テンプレート
Angularのngifでtrueとfalseの場合ごとにテンプレートを切り替える
フォーム
Angularでフォームに入力した値をリアルタイムに表示する