Wie unterstütze ich RouteParams beim erneuten Laden der Seite mit Angular 2 Dart?

Question

Ich benutze den Router und RouteParams in Angular 2 Dart.

Meine Strecken sind wie folgt:

@RouteConfig(const [ 
    const Route(path: '/', component: ViewLanding, as: 'home'), 
    const Route(path: '/landing', component: ViewLanding, as: 'landing'), 
    const Route(path: '/flights', component: ViewFlights, as: 'flights'), 
    const Route(path: '/picker/:cityDepart/:cityArrival/:dateDepart/:dateArrival/', component: ViewFlights, as: 'picker'), 
    const Route(path: '/order/:id/:level/:dateDepart/:dateArrival/', component: ViewOrder, as: 'order'), 
    const Route(path: '/order/complete', component: ViewComplete, as: 'orderComplete') 
]) 

// Anwendungs ​​Einspeisepunkt:

void main() { 
    print('-- Main.dart 2 --'); 
    bootstrap(Tickets, [ 
    routerInjectables, 
    client_classes, 
    // The base path of your application 
    bind(APP_BASE_HREF).toValue('/'), 
    // uncomment this if you want to use '#' in your url 
    bind(LocationStrategy).toClass(HashLocationStrategy) 
    ]); 
} 

Dies funktioniert mit Router-Ausgang/Router-Link/router.navigate

jedoch , beim Neuladen der Seite - Ich bekomme keine positive Übereinstimmung für Routen mit Params. IE: wenn ich http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02 aktualisiere - gehe ich zu einer Elternansicht ohne Kind-Routen. Dieses Symptom gilt für jede Route mit Params.

Navigieren direkt oder erfrischend: http://localhost:8080/#/flights/ - wie erwartet funktioniert - die ViewFlights Komponente instanziiert

Symptome: Routing mit params ausfällt.

Frage: Wie definiere ich Routen Konfigurationen mit Parametern auf Refresh

Links zu arbeiten: https://github.com/rightisleft/web_apps_dart/blob/angular2/web/main.dart https://github.com/rightisleft/web_apps_dart/blob/angular2/lib/client/tickets.dart

Answer 1

Wenn ich Ihre Frage richtig zu verstehen, müssen Sie die abonnieren Router-Ereignisse in Ihrer Komponente, um die alten Params mit neuen zu aktualisieren, und aktualisieren Sie dann Ihre Benutzeroberfläche.

Ich nehme an, Ihr Problem ist, wenn Sie eine URL öffnen http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02, und dann navigiert zu http://localhost:8080/#/picker/SAN/SFO. Sie ändern die Route, aber die Komponente ist bereits instanziiert, was bedeutet, dass der neue Parameter nicht aktualisiert (oder entfernt) wird. Was ich in der Regel tun, ist die folgende in Ihrer Stammkomponente

Angular 5

constructor(private router:Router){ 
// Subscribe to the router events. 
// It may be a good idea to assign this subscription to a variable, and then do an unsubscribe in your ngOnDestroy(). 
this.router.events.subscribe(event=>{ 
    if(event instanceof ActivationEnd){ 
    var cityDepart = event.snapshot.params["cityDepart"]; 
    var cityArrival = event.snapshot.params["cityArrival"]; 
    var dateDepart = event.snapshot.params["dateDepart"]; 
    var dateArrival = event.snapshot.params["dateArrival"]; 
    // do some logic 
    } 
}); 
}