如何使用Angular 2 Dart在页面重新加载时支持RouteParams？

Question

我在Angular 2 Dart中使用Router和RouteParams.

我的路线如下:

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

这适用于router-outlet/router-link/router.navigate

但是,在页面重新加载时 - 我没有得到与params的路线的正面匹配.IE:如果我刷新http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02- 我会转到没有子路由的父视图.任何具有params的路线都会出现这种症状.

直接导航或刷新:http://localhost:8080/#/flights/ - 按预期工作 - 实例化ViewFlights组件

症状: 使用params路由失败.

问题: 如何定义路径配置以在刷新时使用参数

链接: 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

如果我正确理解你的问题，你需要订阅组件中的路由器事件以用新参数更新旧参数，然后更新你的用户界面。

我假设你的问题是当你打开一个 url http://localhost:8080/#/picker/SAN/SFO/2015-01-01/2015-04-02，然后导航到http://localhost:8080/#/picker/SAN/SFO. 您所做的是更改路线，但组件已经实例化，这意味着新参数不会更新（也不会删除）。我通常在您的父组件中执行以下操作

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