Dependency Injection - System Dostaw Zamku

Dependency Injection (DI) to wzorzec, w którym Angular automatycznie dostarcza zależności do komponentów i serwisów - jak system zaopatrzenia dostarczający broń i prowiant do zamków.

Wstrzykiwanie Serwisów

Sposób 1: inject() (Angular 14+, zalecany)

import { Component, inject } from '@angular/core';
import { KatanaService } from './services/katana.service';

@Component({
  selector: 'app-forge',
  standalone: true,
  template: `
    <h2>Kuźnia Katany</h2>
    <button (click)="forgeKatana()">Wykuj Katanę</button>
    <ul>
      @for (katana of katany; track katana.id) {
        <li>{{ katana.name }} - {{ katana.damage }} DMG</li>
      }
    </ul>
  `
})
export class ForgeComponent {
  private katanaService = inject(KatanaService);
  katany = this.katanaService.getAll();

  forgeKatana(): void {
    this.katanaService.forge('Masamune', 'Tachi');
    this.katany = this.katanaService.getAll();
  }
}

Sposób 2: Constructor Injection (klasyczny)

@Component({...})
export class ForgeComponent {
  constructor(private katanaService: KatanaService) {}

  forgeKatana(): void {
    this.katanaService.forge('Masamune', 'Tachi');
  }
}

inject() vs Constructor