如何在AG Grid中为单元格添加HREF链接？（Angular 5环境）

没错，你猜的完全正确——核心就是用**单元格渲染器（cell renderers）**来实现。这里给你两种常用的方案，按需选择：

方案1：简单内联渲染器（快速实现） #

如果只是基础的跳转需求，直接在列定义里写一个内联的cellRenderer函数就行，返回带<a>标签的HTML：

columnDefs = [
  { 
    headerName: 'Make', 
    field: 'make',
    // 自定义单元格渲染逻辑
    cellRenderer: (params) => {
      // 这里假设编辑页面的路径基于数据的id，你可以根据实际需求调整URL规则
      return `<a href="/edit/${params.data.id}" target="_blank">${params.value}</a>`;
    }
  },
  // 其他列配置...
];

这种方式适合快速落地，但如果你的链接需要绑定Angular路由（比如用routerLink）或者有更复杂的交互逻辑，建议用下面的组件式渲染器。

方案2：自定义Angular组件渲染器（更符合Angular生态） #

这种方式更贴合Angular的开发模式，适合需要路由跳转、绑定事件或者复杂业务逻辑的场景，步骤如下：

1. 创建单元格渲染器组件 #

新建一个组件（比如LinkCellRendererComponent），模板里写跳转链接：

<!-- link-cell-renderer.component.html -->
<!-- 用routerLink实现Angular内路由跳转，也可以换成普通href -->
<a [routerLink]="['/edit', params.data.id]">{{ params.value }}</a>

组件类需要实现AG Grid的ICellRendererAngularComp接口，用来接收单元格参数：

// link-cell-renderer.component.ts
import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-link-cell-renderer',
  templateUrl: './link-cell-renderer.component.html'
})
export class LinkCellRendererComponent implements ICellRendererAngularComp {
  params: any;

  // 初始化时接收AG Grid传递的参数
  agInit(params: any): void {
    this.params = params;
  }

  // 单元格刷新时的逻辑，这里返回false表示不刷新，直接重建组件
  refresh(params: any): boolean {
    return false;
  }
}

2. 在Grid组件中注册并使用 #

在你的AG Grid宿主组件里，把自定义组件注册到frameworkComponents，然后在列定义里引用：

// your-grid.component.ts
import { Component } from '@angular/core';
import { LinkCellRendererComponent } from './link-cell-renderer.component';

@Component({
  selector: 'app-your-grid',
  templateUrl: './your-grid.component.html'
})
export class YourGridComponent {
  columnDefs = [
    { 
      headerName: 'Make', 
      field: 'make',
      // 引用注册好的组件key
      cellRenderer: 'linkCellRenderer'
    },
    // 其他列...
  ];

  // 注册自定义单元格渲染器组件
  frameworkComponents = {
    linkCellRenderer: LinkCellRendererComponent
  };

  // 你的数据源rowData...
  rowData = [/* 你的数据数组 */];
}

3. 模块配置 #

别忘了在你的Angular模块里声明这个自定义组件，并且如果用routerLink的话，要确保导入了RouterModule。

注意事项 #

• 如果用普通href跳转外部链接，记得加target="_blank"（如果需要新窗口打开），同时注意跨域安全问题；
• 如果是Angular单页应用内的跳转，优先用routerLink，避免页面刷新；
• 内联渲染器返回的HTML会被AG Grid自动处理，但如果涉及复杂HTML，建议用组件式渲染器更安全、易维护。

内容的提问来源于stack exchange，提问作者Judy007