滚动数据表

时间:2017-12-15 08:53:31

标签: angular angular2-routing lifecycle ngx-datatable

当前行为

我创建了一个ngx-datatable,其中一列有一个按钮。当我使用数据表加载路由时,此按钮单击工作正常。这个按钮的作用是路由到另一个"详细信息页面"被点击的元素。

但是,当我加载相同的路线并首先滚动数据表然后点击相同的按钮时它就不再工作了。路线没有变化。但是当我点击浏览器上一个按钮然后点击前进按钮时," DetailPage"显示。

图片&代码

因此,第一张图片显示了带有ngx-datatable的新加载组件。当我点击红色的按钮(标记)时,路由器将路由到另一个页面并正常工作(见图2)。

Freshly loaded component

Result without scrolling

然而,当我重新运行应用程序并在加载组件后向下滚动一点(参见图3)。相同的按钮不再起作用,但是如果我执行上面提到的技巧(首先点击上一个然后在浏览器导航中转发),它会加载想要的路线。

Freshly loaded component and scrolled Result I get when I click after I scroll

在按钮上执行的方法单击:<​​/ p>

goToDetailOfWearable(wearable: ResultWearable) {
this.resultService.sendResultWearableToService(wearable);
this.router.navigateByUrl('Home/ProcessCategory/Processes/Activities/Result/Details'); }

wearable参数是行,第一行将此行发送到服务,第二行路由到&#34;详细信息页&#34;

1 个答案:

答案 0 :(得分:0)

它似乎与区域有关。如果强制操作在区域内运行,则可以:

this.zone.run(() => this.router.navigateByUrl('Home/ProcessCategory/Processes/Activities/Result/Details'); });