How do i support RouteParams on page reload using Angular 2 Dart?

Question

I'm using the Router and RouteParams in Angular 2 Dart.

My routes are as follow:

@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')
])

// Application Entry Point:

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)
  ]);
}

This works fine with router-outlet / router-link / router.navigate

However, on page reload - I don't get a positive match for routes with params. IE: if I refresh http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02 - I go to a the parent view with no child routes. This symptom is true for any route with params.

Navigating directly to or refreshing to: http://localhost:8080/#/flights/ - works as expected - the ViewFlights component is instantiated

Symptoms: routing with params fails.

Question: How do I define route configurations to work with parameters on refresh

Links: 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

This was supposed to be fixed in alpha31 (see [issue](https://github.com/angular/angular/issues/2920) and [fix](https://github.com/angular/angular/commit/c177d88)), although that looks to be only for the URL, not the params. This should be issued in their git for reviewing. — Eric Martinez, Sep 08 '15 at 20:25
did you try (inject router ans Location in the constructor of the first component) and use: this.router.navigateByUrl(this.location.path()); — timmz, Feb 26 '16 at 11:30

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

If I understand your question correctly, you need to subscribe to the router events in your component to update the old params with new, and then update your UI.

I assume your problem is when you open an url http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02, and then navigates to http://localhost:8080/#/picker/SAN/SFO. What you do is changing the route, but the component is already instantiated, meaning the new param will not be updated (nor removed). What I usually do is the following in your parent component

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
  }
 });
}

How do i support RouteParams on page reload using Angular 2 Dart?

1 Answers1

Angular 5