angular - 行数据中的 ag-grid routerlink 导致模板中断

Question

您好，我在 ag-grid 表中的导航按钮遇到问题。当将用户路由到不同的组件时，显示会中断。请参见下面的屏幕截图:

现在，如果我单击页面上的任意位置，它会正确显示(这是不正确的功能。我希望在组件登陆时显示正确的模板)。请参见下面的屏幕截图: 我有一个 grid.component，网格的所有配置都在其中进行，并且我实现了一个 cellRendererFramework 来合并一个用于编辑网格行的按钮。这是我对编辑按钮组件的实现:

  this.columns.push({
    headerName: '#',
    cellRendererFramework: ActionButtonRendererComponent,
    field: '_actions',
    width: 300,
  });
  this.gridOptions.columnDefs = this.columns;

在这个简单的ActionButtonRendererComponent中，我有一个模板，显示一个简单的超链接以及相关且正确的路线

<a class="btn btn-primary btn-sm mr-2 mb-2" routerLink="/to/my/route" type="button"><i aria-hidden="true" class="fa fa-edit"></i></a>

最终结果是我的网格如下所示: 现在，如果我单击蓝色编辑按钮，就会发生这种意外行为(正如我上面所描述的和相关的屏幕截图)。奇怪的是，如果我在网格行之外创建一个超链接，实现相同的路线 /to/my/route 它可以完美地工作并正确加载相关的组件模板，而不需要额外的单击。

这种行为太奇怪了，我无法理解。任何帮助将不胜感激。

Answer 1

发现了一些 hacky 解决方案。 您应该将运行时与 NGZOne“同步”。

this.ngZone.run(() => {
  this.router.navigate([url, paramValue]);
});