角度的ag-grid中的单元格渲染问题

Question

我在角度使用 ag-grid，我想在单击特定单元格时重定向到链接。

所以这里我有一个来自 api 的新值，它位于对象下的数组中。 那是 我在第一列中显示的对象 dto-> dataitems[shortName] 但是当用户单击它时，我想将其重定向到路由器链接。

我尝试了下面的代码，但它不起作用。

component.ts 文件：

 headerName: 'Deal Name',
          autoHeight: true,
          colId: 'shortName',
          field: 'shortName',
          exportColumn: true,
          width: 275,
          cellRendererFramework: function(params) {
            return '<a href="javascript:void(0)"'+
             '[routerLink]="[/valuation,'+
              '{deal: test,'+
              'b: 2020Q3,'+
              'c: someval,'+
              'd: 9'+
               '}]"' +
             'target="_blank" rel = "noopener">'+params.value+'</a>'
          },

当我使用上面的代码时，我看到了值，但是当我点击链接时它不起作用。

我还使用 ng-template 尝试了以下代码，但如果我添加我的列，它只会显示空白值

html：

<ng-template #dealNameCell let-row>
      <a
        *ngIf="row.canView"
        href="javascript:void(0)"
        [routerLink]="[
          '/valuation',
          {
          deal: row.someval,
          b: row.someval,
          c: row.someval,
          d: row.someval
         }
        ]"
        queryParamsHandling="merge"
      >
        {{ row.shortName }}
      </a>

      <a
        data-toggle="modal"
        data-target="#changeQuarterModal"
        *ngIf="!row.canView"
        href="javascript:void(0)"
        queryParamsHandling="merge"
      >
        {{ row.shortName }}
      </a>
    </ng-template>

当我使用上面的代码时，我看不到列为空。没有显示任何价值。 在这里，如果我放置了一些位于对象根级别的列，那么它就可以工作。但是我的数据位于对象内的数组下，我无法检索该数据

Answer 1

因此，单元格渲染器绝对可以用于导航，就像任何其他组件一样。我们项目首选的方法是在组件中定义链接的基础，例如link = '/accounts/users/'，然后通过

访问必要的数据

link = '/accounts/users/'
linkText = params.value.linkText; 


agInit(params: any): void {
   this.link += params.value;
// or if you have an array of link params:
// for(const linkSegment of params.value.linkValues) {
//  this.link += linkSegment + '/';
// }
}

然后，在模板中，简单地说：

<a class="my-link" [routerLink]="link">{{params.linkText}}</a>

您也可以使用其他形式的链接，在组件中使用 router.navigate，但这取决于您。

希望对您有所帮助，祝您编码愉快！