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

Ανοίξτε το 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.