Angular サービス
コンポーネントはデータの受け渡しを重点としているため、直接データの取得や保存を行うのはAngularでは望ましくない。
そこで、データの取得や保存に適したAngularの機能、サービスがある
お互いを知らないクラス間で情報を共有するときや、バックエンドなどのデータ取得先の実装変更などに最適である
コンポーネントと同じようにコマンドでサービス用のファイルを作成する
ng generate service [サービス名]
作成するとこんなファイルが出来上がる
code:sample.service.ts
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root',
})
export class SampleService {
constructor() { }
}
作成直後はどこにも依存関係がない(app.module.tsなどにも書き加えられない)
サービスには任意の関数を加えることができる
providedIn: 'root'というものがあるが、これはプロバイダーで使用する範囲を設定したりすることができるようだ。これについてはまた追々別のページに書くことにする
サービスを使うには
サービスを使用したいコンポーネントのコンストラクタにプライベートプロパティで使用する型を引数に入れる
この場合はシングルトンインスタンスとして設定される
code:using-service.component.ts
// -- 略 --
constructor(private sampleService: SampleService) {}
非同期でサービスデータを取得する
HTTPリクエストなどで非同期でデータを取得する必要があるだろう
AngularのHttpClientはObservableというものを返すため、これに対応させる必要がある
コンポーネント側もObservableに合わせた設計に直す必要がある(subscribeを使う)
code:using-service.component.ts
getSome(): void {
this.sampleService.getSome()
.subscribe(someVal => this.someVal = someVal);
}
サービスをコンポーネントで表示する
サービスをコンポーネント内で表示するにはコンポーネントのコンストラクタで、パブリックとして引数を定義する
constructor(public publicService: PublicService) { }