Angularでの依存性注入

投稿日: 2022-04-20 2022-10-10
タグ: Angular

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

getdocs

13036