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

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