Читать книгу Angular - Manfred Steyer - Страница 57
Komponentenlogik
ОглавлениеDie generierte Datei flight-search.component.ts beinhaltet das Grundgerüst für unsere Komponentenlogik (siehe Beispiel 3-1).
Beispiel 3-1: Generierte Komponente
// src/app/flight-search/flight-search.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-flight-search',
templateUrl: './flight-search.component.html',
styleUrls: ['./flight-search.component.scss']
})
export class FlightSearchComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Viele der hier generierten Konstrukte haben wir bereits in Kapitel 1 im Rahmen der AppComponent besprochen. Allerdings möchten wir hier Ihre Aufmerksamkeit auf ein paar Details lenken:
Der Selektor lautet app-flight-search. Das Präfix app wurde von der CLI eingefügt. Diese Präfixe sollen Namenskonflikte mit Komponenten aus Bibliotheken verhindern.
Die generierte Klasse nennt sich FlightSearchComponent, während die zugrunde liegende Datei den Namen flight-search.component.ts erhalten hat. Hierbei handelt es sich um die üblichen Namenskonventionen in der Welt von Angular.
FlightSearchComponent implementiert das Interface OnInit, das wiederum die Methode ngOnInit vorgibt. Diese Methode ruft Angular nach dem Initialisieren der Komponente auf, und somit kann sie für Initialisierungen von Eigenschaften verwendet werden. Details dazu finden Sie in Kapitel 4.
Lassen Sie uns nun dieses Grundgerüst ein wenig ausbauen, um eine Suche nach Flügen zu ermöglichen (siehe Beispiel 3-2).
Beispiel 3-2: Eigenschaften und Methoden für die Flugsuche
// src/app/flight-search/flight-search.component.ts
import { Component, OnInit } from '@angular/core';
import { Flight } from '../flight';
@Component({
selector: 'app-flight-search',
templateUrl: './flight-search.component.html',
styleUrls: ['./flight-search.component.scss']
})
export class FlightSearchComponent implements OnInit {
from = 'Hamburg';
to = 'Graz';
flights: Array<Flight> = [];
selectedFlight: Flight | null = null;
constructor() {
}
ngOnInit(): void {
}
search(): void {
// Implementierung folgt weiter unten.
}
select(f: Flight): void {
this.selectedFlight = f;
}
}
Die Eigenschaften from und to repräsentieren die Suchkriterien für die gewünschten Flüge. Die Standardwerte sollen hier verhindern, dass wir später immer wieder die gleichen Suchkriterien eingeben müssen. Außerdem lassen sie uns auf den ersten Blick erkennen, ob der weiter unten angestrebte automatische Abgleich zwischen den Eigenschaften und den Textfeldern funktioniert.
Das Array flights nimmt die gefundenen Flüge auf. Es ist mit dem Interface Flight aus Kapitel 1 typisiert. Falls Sie dieses Kapitel übersprungen haben, finden Sie den hier benötigten Teil dieses Interface in Beispiel 3-3. Ein paar der in Kapitel 1 verwendeten optionalen Eigenschaften wurden zur Vereinfachung weggelassen.
Die Eigenschaft selectedFlight repräsentiert den ausgewählten Flug. Damit sie initial den Wert null bekommen kann, ist sie vom Typ Flight | null (mehr Informationen über strikte Null-Prüfungen gibt es in Kapitel 2).
Die Methode search kümmert sich um das Abrufen der Flüge, und select notiert sich den vom Benutzer ausgewählten Flug.
Beispiel 3-3: Interface für einen Flug
// src/app/flight.ts
export interface Flight {
id: number;
from: string;
to: string;
date: string; // ISO-Datum: 2016-12-24T17:00+01:00
delayed? boolean;
}
