Υποενότητα 13.2: Εφαρμογές Μιας Σελίδας - Πρακτική

Εισαγωγή

Σε αυτήν την υποενότητα,  θα ενσωματώσετε τη  dishdetail component στην εφαρμογή. Θα χρησιμοποιήσετε route parameter στη URL για να περάσετε στις λεπτομέρειες του επιλεγμένου dish στη dishdetail component. 

Θα Ρυθμίστε τις διαδρομές στη μονάδα δρομολογητή για να ενεργοποιήσετε τη χρήση παραμέτρων διαδρομής εντός της διεύθυνσης URL για να μεταβιβάσετε πληροφορίες σε μια συνιστώσα.

Σε αυτή την εικόνα μπορείτε να δείτε την παράμετρο για το "45% MILK CHOCOLATE" το οποίο είναι 2. Κάθε Choco-dish έχει τη δική του παράμετρο.

Ενημέρωση της dishService

Ενημερώστε τη dishService για να επιστρέψετε ένα συγκεκριμένο  dish ως εξής:

getDish(id: number): Dish {
  return DISHES.filter((dish) => (dish.id === id))[0];
}

Εδώ χρησιμοποιούμε τη μέθοδο filter JavaScript  για να δημιουργήσουμε μια νέα array.

Χρησιμοποιούμε τη συνάρηση βέλους - arrow function για να επιλέξουμε τα στοιχεία από την array που ταιριάζουν με τα κριτήρια που έχουμε καθορίσει. Σε αυτή την περίπτωση, τα κριτήρια είναι ότι το dish.id πρέπει να είναι ίσο και του ίδιου τύπου με το id. Κάθε  Choco-dish έχει μοναδικό id ( μπορείτε να το βρείτε στο dishes.ts) και έτσι κάθε φορά που κάνουμε κλικ σε ένα Choco-dish,θα είναι μόνο ένα Choco-dish που θα πληρεί τα κριτήρια μας, έτσι η array θα έχει μόνο ένα στοιχείο. Ωστόσο, χρησιμοποιούμε το [0] για να καθορίσουμε ότι θέλουμε το πρώτο στοιχείο της array, ώστε να προετοιμαστεί για πιο πολύπλοκες καταστάσεις.

Έτσι, θα εξαγάγουμε αυτό το συγκεκριμένο Choco-dish από αυτή την array  και στη συνέχεια θα επιστρέψουμε - return αυτό το dish από την  getDish method.

Ενημέρωση διαδρομών

Ανοίξτε το routes.ts και προσθέστε την ακόλουθη διαδρομή - route:

{ path: 'dishdetail/:id', component: DishdetailComponent }

Το  :id στη δεύτερη διαδρομή είναι ένα διακριτικό για μια παράμετρο διαδρομής -  route parameter. Σε μια διεύθυνση URL όπως /discdetail/2, "2"είναι η τιμή της παραμέτρου id. Η αντίστοιχη component DishdetailComponent θα χρησιμοποιήσει αυτήν την τιμή για να βρει και να παρουσιάσει το dish με id 2. 

Εάν ζητήσετε από τον δρομολογητή - router να πλοηγηθεί στη detail component  και να εμφανίσει  "75% DARK CHOCOLATE", αναμένετε να εμφανιστεί ένα dish id στη διεύθυνση URL του προγράμματος περιήγησης όπως αυτό

http://localhost:4200/dishdetail/2
Εάν ένας χρήστης εισάγει τη συγκεκριμένη διεύθυνση URL στη γραμμή διευθύνσεων του προγράμματος περιήγησης, ο δρομολογητής θα πρέπει να μεταβεί στην ίδια προβολή "75% DARK CHOCOLATE"

Ενημέρωση MenuComponent

Ανοίξτε το menu.component.html και ενημερώστε το ως εξής.

<div class="media" *ngFor="let dish of dishes" [routerLink]="['/dishdetail', dish.id]">

Όπως βλέπετε έχουμε αντικαταστήσει το(click) = "onSelect(dish)" με το [routerLink]="['/dishdetail', dish.id.  Αυτή η array περιέχει τα id των διαδρομών, τις πληροφορίες για την πλοήγηση του δρομολογητή. Κάθε φορά που κάνουμε κλικ σε κάποιο Choco-dish ο δρομολογητής γνωρίζει σε ποιο στοιχείο αναφερόμαστε και παρέχει τη διαδρομή προς την component προορισμού.

Επίσης, αφαιρέστε το <app-dishdetail> από την template επειδή δεν το χρειάζεστε πλέον. Η δουλειά του θα γίνει από το δρομολογητή.

Ανοίξτε το menu.component.ts  και διαγράψτε τη μεταβλητή selectDish  και τη μέθοδο onSelectDish . Δεδομένου ότι δεν χρησιμοποιούμε πλέον τη μέθοδο (click) = "onSelect (dish)" για να επιλέξετε ένα dish, δεν χρειαζόμαστε πλέον τη μέθοδο onSelect.

Ενημέρωση DishDetail Component

Ανοίξτε το dishdetail.component.ts και διαγράψτε την  input επειδή δεν χρησιμοποιούμε πια το  app-dishdetail στην template, δεν το χρειαζόμαστε.

Ενημερώστε:

. . .
import { DishService } from '../services/dish.service';
import { Params, ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
. . .
export class DishdetailComponent implements OnInit {
  dish: Dish;
  constructor(private dishservice: DishService,
    private route: ActivatedRoute,
    private location: Location) { }
  ngOnInit() {
    const id = +this.route.snapshot.params['id'];
    this.dish = this.dishservice.getDish(id);
 }
  goBack(): void {
    this.location.back();
  }
}

Όπως μπορείτε να δείτε εισάγουμε  { Params, ActivatedRoute } from '@angular/router';. Tο κάνουμε αυτό για να χρησιμοποιήσουμε το στιγμιότυπο- snapshot. Ας δούμε τι κάνει το snapshot:

Αυτή η εφαρμογή δεν θα επαναχρησιμοποιήσει το ίδιο στιγμιότυπο της DishdetailComponent. Ο χρήστης επιστρέφει πάντα στη σελίδα MenuComponent για να επιλέξει άλλο Choco-dish για view. Δεν υπάρχει κανένας τρόπος να περιηγηθεί από μια λεπτομέρεια Choco-dish σε μια άλλη χωρίς να επισκεφθεί τη menu component ενδιάμεσα. Επομένως, ο δρομολογητής δημιουργεί κάθε φορά ένα νέο στιγμιότυπο DishdetailComponent.

Πλοήγηση πίσω στη MenuComponent

Εισαγάγουμε επίσης το { Location } from '@angular/common';,για να μπορέσουμε να κρατήσουμε το τρέχον id της τοποθεσίας μας και έτσι να μπορέσουμε να χρησιμοποιήσουμε τη μέθοδο goBack() 

Το DishdetailComponent έχει ένα κουμπί "Back" που επιστρέφει αποκλειστικά πίσω στη MenuComponent.

Open dishdetail.component.html and update it as follows:

<a (click)="goBack()" class="card-link btn btn-primary btn-sm">BACK</a>

Τα αποτελέσματα

Με τον προηγούμενο κώδικα ολοκληρωμένο, ανοίξτε το τερματικό σας και  μεταβείτε στον υποφακέλο angularChocoYourname   και τρέξτε ng serve για να εκτελέσετε την εφαρμογή σας. Στο πρόγραμμα περιήγησης περιηγηθείτε στο URL localhost:4200 

Κάντε μια  Git commit με το μήνυμα "Angular SPA".

• See more about Single Page Applications