Bedingtes wählen Daten aus dem Speicher oder API in Angular

Question

Angenommen, die folgende Route:

/cars/3

Wenn ich diesen Artikel bearbeiten will, konnte ich einfach die Bearbeitungsform in der Vorlage enthalten und das Auto Element übergeben als eine Eingabe, etwa so:

<edit-car [car]="car"></edit-car>

Wenn ich nutzen, um die folgende Route statt:

/cars/3/edit-car

Diese Komponente muss die Informationen des Fahrzeugelements empfangen. Wenn ich aus der Detailkomponente in den Bearbeitungskomponente gesteuert haben, dann ist es kein Problem, das Auto Artikel Informationen aus dem Laden zu greifen:

car$ = this.store.select(fromRoot.getCar)

Allerdings, wenn jemand zu /cars/3 blättert und dann ändert sich die Route zu /cars/4/edit-car, würde die Edit-Komponente immer noch mit Informationen von Car 3 gefüllt werden.

In diesem Fall muss ich holen Car 4 Informationen von der API.

Warum sollte jemand die URL-Parameter willkürlich ändern? Ich weiß es nicht. Ich bin nur neugierig, was meine Möglichkeiten sind, um dieses Problem zu lösen.

Answer 1

Sie können dies mit einigen ziemlich sauberen Interaktionen mit dem Router lösen. Zum Beispiel würde der Router wie diese

{ path: 'editcar', component: editcar, canDeactivate: [CanDeactivateService] }, 
{ path: 'editcar/:id', component: editcar, canDeactivate: [CanDeactivateService] } 

Dann schauen Sie in Ihrem ngOnInit können Sie ein Abonnement verwenden, um die URL Route zu überwachen Sie werden import { Router, ActivatedRoute, Params } from '@angular/router';

this.routeSubscription = this._activatedRoute.params.subscribe((params: Params) => { 
    if (+params['id'] >= 0) { 
    this.selectedCar = +params['id']; 
    } else { 
    this.selectedCar = 1; //default 
    } 

Von dort es ist alles importieren müssen über Aufruf Ihre API mit this.selectedCar