Как я могу поддерживать RouteParams при перезагрузке страницы с помощью Angular 2 Dart?

Я использую Router и RouteParams в Angular 2 Dart.

Мои маршруты следующие:

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

//Точка входа в приложение:

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

Это отлично работает с маршрутизатором-выходом/маршрутизатором-link/router.navigate

Однако на перезагрузке страницы я не получаю положительного соответствия для маршрутов с параметрами. IE: если я обновляю http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02 - я перехожу к родительскому виду без дочерних маршрутов. Этот симптом верен для любого маршрута с параметрами.

Навигация непосредственно или обновляется до: http://localhost:8080/#/flights/ - работает как ожидалось - компонент ViewFlights создается

Симптомы: маршрутизация с параметрами не выполняется.

Вопрос: Как определить конфигурации маршрутов для работы с параметрами при обновлении

Ссылки: 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

Ответы

Ответ 1

Если я правильно понял ваш вопрос, вам нужно подписаться на события маршрутизатора в своем компоненте, чтобы обновить старые параметры с новыми, а затем обновить свой пользовательский интерфейс.

Я предполагаю, что ваша проблема заключается в том, что вы открываете url http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02, а затем переходите к http://localhost:8080/#/picker/SAN/SFO. Что вы делаете, это изменение маршрута, но компонент уже создан, что означает, что новый параметр не будет обновлен (или удален). Обычно я делаю следующее в вашем родительском компоненте

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