Werte aktualisieren, wenn auf eine andere Komponente Angular 2

Question

Senden

Ich verwende Router eine ID von einer Komponente mit einer Liste von Restaurants an eine andere Komponente über URL

[RouterLink] = "['../ restaurant-menu', restaurant.id]" 

I In der anderen Komponente zu senden verwenden Sie die ID als ein anderes Restaurant und klicken Sie auf, lädt die App das Menü des ersten Restaurants I folgt

ngOnInit() { 
    this.restaurantId = this.router.snapshot.params ['id'] 
    this.getRestaurantMenu (this.restaurantId) 
} 

restaurantMenu: void [] 

getRestaurantMenu (id): void { 
this.RestaurantsService.getRestaurantMenu (id) 
    .subscribe (
     restaurantMenu => this.restaurantMenu = restaurantMenu, 
     err => { 
      console.log (err); 
    }); 
} 

Alles funktioniert gut ich das erste Mal ein Restaurant klicken und die Menükarte laden, beginnt das Problem, wenn ich in die Liste der Restaurants zurückkehren geklickt, muss ich den Browser manuell aktualisieren, um das zu laden korrektes Menü.

Ich bezweifle, dass die ID aktualisiert werden konnte nach dem Aufruf der Funktion getRestaurantMenu(), egal wie oft ich gehe und in verschiedene Restaurants eingeben wird es immer das Menü des ersten Restaurants zeigen, aber ich habe auch versucht, dies zu tun auf dem HTML:

<P> {{restaurantId}} </ p> 

Und die angezeigte ID-Nummer ist korrekt. Ich habe verschiedene Wege ausprobiert, um diese ID zu übergeben, aber das Ergebnis ist das gleiche, was könnte das Problem sein? Dank

Answer 1

ich diese endlich zu lösen, das Problem im Dienst war, hier das Menü nicht in der Komponente zu erhalten, ist die Lösung:

angular 2 service is not updating params

wenn jemand anderes läuft in dieses Problem dabei helfen kann.

Answer 2

Vielleicht zu verwenden versuchen, nicht snapshot aber ActivatedRoute statt:

import { ActivatedRoute, Params } from "@angular/router"; 

... 

constructor(private route: ActivatedRoute) { } 

... 

ngOnInit() { 

    // (+)param['id'] to convert string to number 
    this.route.params 
    .switchMap((param: Params) => this.RestaurantsService.getRestaurantMenu(+param['id'])) 
    .subscribe(
     restaurantMenu => this.restaurantMenu = restaurantMenu, 
     err => console.log (err) 
    ); 
} 

Answer 3

Ich tat, was hier https://github.com/angular/angular/issues/9811#issuecomment-264874532 die Komponente restaurantMenu vorgeschlagen bleibt gleich, aber in der restaurantList Komponente Ich habe diese:

import { Router } from '@angular/router'; 
    ... 
    openMenu(restaurant) { 
    this.router.navigate(['../restaurant-menu', restaurant]) 
     .then(() => window.location.reload()) 
    } 

und auf der restaurantList HTML habe ich eine (click)="openMenu(restaurantId)" Es lädt die neue Seite automatisch und die ID ist aktualisiert, es al Es ist eine knifflige Lösung, aber funktioniert und ich werde es benutzen, bis ich einen besseren gefunden habe.