执行router.navigate后刷新组件

时间:2017-03-10 11:17:25

标签: angular angular2-routing

我正尝试使用以下方法从一个组件导航到另一个组件:

this.router.navigate(['/path/'], '_blank');

问题是我导航到的组件已经创建,当我导航回页面时,它的ngOnInit方法没有被执行。我正在尝试刷新页面上显示的数据。这是在目标组件的ngOnInit函数中:

this.sub = this._DataService.getData().subscribe(data=> {
        this.data= data;
    });

如何告诉目标组件,在进行导航时,页面上的数据总是会刷新?

我正在使用Ag-Grid在表格中显示数据。在NgOnInit函数中:

this.gridOptions.rowData = this.data;

我最初来自的组件是一个添加新对象的表单。提交该对象后,它应重定向到网格并显示新对象。这就是网格应该更新其数据的原因,但是由于某种原因,只有当我通过网格中的上下文菜单操作而不是导航手动刷新它时才会这样做。

表单中的提交功能如下所示:

 onSubmit(data) {
    this._DataService.addData(data.value).subscribe();
    this.router.navigate(['/data/']);
}

3 个答案:

答案 0 :(得分:7)

如果您导航到同一路线且只有参数值发生变化,请将初始化代码从constructor移出并从constructor调用它,并在路线参数更改时:

constructor(private route:ActivatedRoute) {
  route.params.subscribe(val => this.initialize())
}

答案 1 :(得分:2)

我通过将onSubmit函数更改为:

来修复它
  onSubmit(data) {
    this._DataService.addData(data.value).subscribe(data => {
        this.router.navigate(['/path]);
    });
}

感谢您提出这个问题:Angular2 - Redirect after submit does not show updated data

答案 2 :(得分:0)

我实现了一个重定向组件

this.router.navigate(['/ redirect /',window.location.pathname]);