Ag-grid 如何在普通 js 渲染器中使用角度材质组件答案

【问题标题】：Ag-grid how to use angular material component in plain js rendererAg-grid 如何在普通 js 渲染器中使用角度材质组件
【发布时间】：2021-10-15 11:17:15
【问题描述】：

我正在尝试在纯 js 渲染器中使用角度材质组件，如 ag-grid 文档中所述，使用框架渲染器很慢。

但是，如果我只是将材质组件代码放在纯js中，它不会正确渲染材质组件

class plainJsRadioRenderer {
  eGui: any;

  // gets called once before the renderer is used
  init(params) {
      // create the cell
      this.eGui = document.createElement('div');
      this.eGui.innerHTML = `<mat-radio-button>Option 1</mat-radio-button>`;
  }

  getGui() {
      return this.eGui;
  }

  // gets called whenever the cell refreshes
  refresh(params) {
    return false;
  }
}

以上是我的尝试，但它只会将mat-radio-button直接粘贴到网格单元格中而不对其进行处理。

那么如何在纯 js 渲染器中使用材质组件呢？谢谢

【问题讨论】：

你还必须添加所需的类并导入模块
我已经在 Angular 模块和 component.ts 中导入了模块。但还是不行
和必修课？
必需的类你的意思是渲染器类吗？如果是，那么我已经将我的课程放在 ag-grid 的同一组件中

标签： angular ag-grid ag-grid-angular

【解决方案1】：

当您为 ag-grid cellRenderer 提供一个函数时，它只会使用特定于行的参数调用该函数并将结果放入单元格的 innerHtml 中。但是当你想使用 Angular 组件/指令标签（<mat-radio-button> 也是一个指令 github）时，Angular 应该为你呈现它。这是缺少的部分。因此，ag-grid 允许您将组件与框架解决方案一起使用，该解决方案在将组件放入单元格之前呈现组件。据我所知，您有三个选择：

1- 使用组件作为渲染器并支付优化成本。 2- 使用 CSS 制作常规单选按钮，如材质单选按钮。 3- 要求 UX 设计师为单选按钮设计一个更简单的 UI。

【讨论】：