2

在组件初始化期间使用 router.navigate() 设置查询参数的正确方法是什么（不触发组件重新加载）？我尝试了一些变化，但都失败了。我有一个带有@Routes 的应用程序组件，一个带有@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 触发组件的重新加载。所以我得到激活，初始化，激活，初始化，然后是最终 url 的 2x router.changes，/:evt/child 的初始路由没有路由更改事件，只有 /:evt/child;x=1; 两次。随后是关于 _recognize 的子组件上缺少路由的异常。

我还尝试在子构造函数期间调用 router.navigate() ，但这触发了导致 Chrome 崩溃的无限组件重新加载循环:)。

在 Angular 1 中，您可以在组件初始化期间调用 $location.search(query) 来更新查询参数而无需重新加载组件。在 Angular 2 RC 1 (Restart/Reset/Redo Candidate ;) 我找不到等效的调用。

4

0 回答 0