Verwendung eines Services in Angular

In der vorherigen Lektion haben wir unseren eigenen Service DataService erstellt. Lassen Sie uns diesen nun in die Komponente importieren:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // hier

Im Dekorator @Component muss in der Eigenschaft providers unser Service angegeben werden:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // hier
})

Nun werden wir einen speziellen Ansatz verwenden, der Dependency Injection (dependency injection) genannt wird. Seine Essenz besteht darin, dass wir im Konstruktor der Komponente unseren Service als Parameter übergeben können und er automatisch in eine private Eigenschaft unserer Komponente gelangt. Sehen Sie im Code:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // Dependency Injection
    console.log(this.dataService); // Service in der privaten Eigenschaft
  }
}

Die Injection für unseren Service funktioniert, da wir zuvor den Dekorator Injectable auf ihn angewendet haben.

Lassen Sie uns nun im Konstruktor der Komponentenklasse Daten aus unserem Service abrufen, indem wir die entsprechende Methode aufrufen:

app/app.component.tsexport class AppComponent {
  public data: string[] = [];
  
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

Lassen Sie uns die erhaltenen Daten im Template der Komponente ausgeben:

app/app.component.html<ol>
  <li *ngFor="elem of data">
    {{ elem }}
  </li>
</ol>