如何使用aurelia在ag-grid的列中包含超链接？

import { inject } from 'aurelia-framework';

@inject(Element)
export class LinkRenderer {
  constructor(element) {
    this.element = element;
  }

  render(params) {
    const link = document.createElement('a');
    link.href = params.value; // 设置超链接的URL
    link.textContent = params.value; // 设置超链接的显示文本
    link.target = '_blank'; // 在新标签页中打开超链接

    this.element.appendChild(link);
  }

  refresh(params) {
    return false; // 禁止ag-Grid自动刷新单元格内容
  }
}

<template>
  <ag-grid-aurelia #agGrid style="width: 100%; height: 100%;" class="ag-theme-alpine"
                   grid-options.bind="gridOptions">
    <ag-grid-column field="name" header-name="Name"></ag-grid-column>
    <ag-grid-column field="link" header-name="Link" cell-renderer.bind="linkRenderer"></ag-grid-column>
  </ag-grid-aurelia>
</template>

import { inject } from 'aurelia-framework';
import { LinkRenderer } from './link-renderer';

@inject(LinkRenderer)
export class App {
  constructor(linkRenderer) {
    this.linkRenderer = linkRenderer;
  }

  gridOptions = {
    columnDefs: [
      { field: 'name', headerName: 'Name' },
      { field: 'link', headerName: 'Link', cellRenderer: this.linkRenderer.render.bind(this.linkRenderer) }
    ],
    rowData: [
      { name: 'Google', link: 'https://www.google.com' },
      { name: 'Baidu', link: 'https://www.baidu.com' },
      { name: 'Microsoft', link: 'https://www.microsoft.com' }
    ]
  };
}