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