← Angular コース
16. inject() — サービスを受け取る
コンポーネントからサービスを使うには、inject() 関数でインスタンスを受け取ります。private cart = inject(CartService) とフィールドの初期化として書くだけで、DIコンテナが管理しているインスタンスが手に入ります。あとは this.cart.add() のように普通のメソッド呼び出しで使えます。
以前はコンストラクタの引数で受け取る書き方(コンストラクタ注入)が主流でしたが、現在は inject() が推奨です。継承時に引数を引き回す必要がなく、サービスの中から別のサービスを受け取るときも同じ書き方で済みます。
注意点は、inject() を呼べるのはフィールド初期化やコンストラクタの中だけ、ということです。クリックハンドラなど後から呼ばれるメソッドの中で実行するとエラーになるので、必要なサービスはクラスの先頭でまとめて受け取っておきましょう。
サンプルコード(フレームワーク環境が必要なため表示のみ)
import { Component, inject } from '@angular/core';
import { CartService } from './cart.service';
@Component({
selector: 'app-product',
template: '<button (click)="addToCart()">カートに入れる</button>',
})
export class ProductComponent {
// フィールドの初期化として inject() でインスタンスを受け取る
private cart = inject(CartService);
addToCart() {
this.cart.add('りんご');
console.log('カートの件数:', this.cart.count());
}
}