如何使用Angular 2 RC.1路由器w /查询参数导航到自我

时间:2016-05-13 20:42:45

标签: angular angular2-routing angular2-router

在组件初始化期间使用router.navigate()设置查询参数的正确方法是什么(没有触发组件重新加载)?我尝试了一些变化,但都失败了。我有一个带@Routes的app组件,一个带有@Routes的父组件和一个子组件。应用路线是'/:evt' - > ParentComponent,父路线是'/ child' - > ChildComponent。子组件有

routerOnActivate(curr:RouteSegment) {
    this.route = curr;
}
ngOnInit() {
    ...
    this.updateUrl();
    ...
}
updateUrl() {
    var query = { x=1, ... };
    // Option 1
    this.router.navigate(['child', query]);
    // Option 2
    this.router.navigate(['./child', query]);
    // Option 3 - full /:evt/child
    this.router.navigate(['/', this.event.id , 'child', query]);
    // Option 4
    this.router.navigate(['child', query], this.route);
}
  • 选项1& 2使组件无法加载或至少使其处于不良状态。但是日志中没有错误。

  • 选项3将重新加载完整路线并跳转到页面顶部。所以不能使用,但似乎有效。

  • 选项4触发重新加载组件。所以我得到激活,初始化,激活,初始化,然后2x router.changes的最终网址,没有路由更改事件的初始路由/:evt / child,只有/:evt / child; x = 1;两次。接下来是关于来自_recognize的子组件缺失路线的例外。

我也尝试在子构造函数中调用router.navigate(),但是这触发了一个崩溃Chrome的无限组件重新加载循环:)。

在Angular 1中,您可以在组件init期间调用$ location.search(query)来更新没有组件重新加载的查询参数。在Angular 2 RC 1(重启/重置/重做候选;)中,我找不到等效的呼叫。

0 个答案:

没有答案