依存性注入(DI)は、Angular 2+のコアコンセプトであり、クラスが別のクラスから依存性を受け取ることを可能にします。 ほとんどの場合、Angularでは、依存性の注入は、サービスクラスをコンポーネントまたはモジュールクラスに注入することによって行われます。
たとえば、注射可能なサービスを定義する方法は次のとおりです。 ハイライトされた部分に特に注意してください。
サービス:popcorn.service.ts
import { Injectable } from '@angular/core'; @Injectable() export class PopcornService { constructor() { console.log("Popcorn has been injected!"); } cookPopcorn(qty) { console.log(qty, "bags of popcorn cooked!"); }
そして、これが私たちのポップコーンサービスをコンポーネントに注入する方法です:
コンポーネント:app.component.ts
import { Component } from '@angular/core'; import { PopcornService } from './popcorn.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [PopcornService] }) export class AppComponent { constructor(private popcorn: PopcornService) {} cookIt(qty) { this.popcorn.cookPopcorn(qty); }
テンプレートのcookIt()メソッドは、挿入されたサービスの cockPopcorn()メソッドを呼び出します。 テンプレートでcookIt()メソッドを使用してみましょう。
テンプレート:app.component.html
<input type="number" #qty placeholder="How many bags?"> <button type="button" (click)="cookIt(qty.value)"> Cook it! </button>