依存性注入(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>