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 soulution。你应该＆＃34;同步＆＃34;与NGZOne一起运行。

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

Answer 2

它实际上是通过params.value运行的。在ActionButtonRenderComponent.ts

中

import { Component, NgZone } from '@angular/core';
import { Router } from '@angular/router';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
    template: `
        <span class="spn-style">
            <i
                class="fal fa-cube fa-std color_add"
                routerLink="/home/projects/{{ params.value }}/mt-entry"
            ></i>
        </span>
    `,
    styleUrls: ['./action-button-renderer-column.component.scss'],
})
export class ActionButtonRenderComponent
    implements ICellRendererAngularComp {
    public params: any;  //this is the imp bit

    agInit(params: any): void {
        this.params = params;  // console log it 
    }



    refresh(): boolean {
        return false;
    }
}

在上面的路由器链接代码中，我使用了{{params.value}}，它没有任何变化。

注意：如果您拼写错误或无效的路由最终导致页面破裂，则该路由应该有效

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

2 个答案: