search

web-dave / angular-days

1 stars 0 forks source link

Route Params #8

Open web-dave opened 2 years ago

web-dave commented 2 years ago

Generiere 6 neue Angular Components aber diesmal für einzelne Entitäten.

(Pro Nav-Link eine)

Lokal

ng g component swapi/film

Online

  1. Rechtsklick auf den src Ordner in der Projekt Section.
  2. Klick auf Angular Generator
  3. Component auswählen
  4. Name film im Promt eingeben und bestätigen
  5. Dann den Ordner per mouse drag 'n drop nach src/app/swapi verschieben
  6. Komponente im SwapiModule in declarations array eintragen

Routing

  1. Für jeden Link eine route erstellen.
  2. In der Componente den ActivatedRoute holen (DI)
  3. Aus den ActivatedRoute/Snapshot/params die ID holen
  4. Eine Service Methode implementieren um das Element zu holen.
  5. Daten holen
  6. Beliebige Werte aus dem Element Anzeigen.
Routing example ## SwapiRouting ```ts { path: 'films/:id', component: FilmComponent, }, ```
Service ## ApiService ```ts getElement( name: 'films' | 'people' | 'planets' | 'species' | 'starships' | 'vehicles', id: number ) { return this.http.get(this.urls[name] + id); } ```
Details example ## FilmComponent ```ts export class FilmComponent implements OnInit { film: any; constructor(private route: ActivatedRoute, private api: ApiService) {} ngOnInit(): void { this.api .getElement('films', this.route.snapshot.params['id']) .subscribe((data) => (this.film = data)); } } ```