如何将Angular Kendo Grid单元格Tooltip封装为自定义指令？

完全可以通过自定义指令实现这个需求，彻底避免重复编写单元格模板代码。以下是具体实现方案：

1. 创建自定义指令 #

编写MyGridCellTooltipDirective指令，通过内部模板生成带Tooltip的单元格内容，并将其绑定到Kendo Grid列的单元格模板上：

import { Directive, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { KendoGridColumnComponent } from '@progress/kendo-angular-grid';

@Directive({
  selector: '[myGridCellToolTip]',
  template: `
    <ng-template #tooltipCellTemplate let-dataItem>
      <span kendoTooltip [title]="dataItem[column.field]">
        {{ dataItem[column.field] }}
      </span>
    </ng-template>
  `
})
export class MyGridCellTooltipDirective implements OnInit {
  @ViewChild('tooltipCellTemplate') private tooltipCellTemplate!: TemplateRef<any>;

  constructor(public column: KendoGridColumnComponent) {}

  ngOnInit(): void {
    // 将指令内部的模板设置为当前列的单元格模板
    this.column.cellTemplate = this.tooltipCellTemplate;
  }
}

2. 模块配置 #

在你的Angular模块中导入Kendo相关模块，并声明/导出自定义指令：

import { NgModule } from '@angular/core';
import { GridModule } from '@progress/kendo-angular-grid';
import { TooltipModule } from '@progress/kendo-angular-tooltip';
import { MyGridCellTooltipDirective } from './my-grid-cell-tooltip.directive';

@NgModule({
  imports: [GridModule, TooltipModule],
  declarations: [MyGridCellTooltipDirective],
  exports: [MyGridCellTooltipDirective]
})
export class YourFeatureModule {}

3. 使用方式 #

现在可以直接在Kendo Grid列上添加指令，实现简化写法：

<kendo-grid-column field="firstName" title="First Name" myGridCellToolTip></kendo-grid-column>

扩展：自定义Tooltip内容 #

如果需要自定义Tooltip显示的内容，可以给指令添加输入属性，支持传入自定义逻辑：

修改指令代码 #

import { Directive, OnInit, TemplateRef, ViewChild, Input } from '@angular/core';
import { KendoGridColumnComponent } from '@progress/kendo-angular-grid';

@Directive({
  selector: '[myGridCellToolTip]',
  template: `
    <ng-template #tooltipCellTemplate let-dataItem>
      <span kendoTooltip [title]="customContent ? customContent(dataItem) : dataItem[column.field]">
        {{ dataItem[column.field] }}
      </span>
    </ng-template>
  `
})
export class MyGridCellTooltipDirective implements OnInit {
  @ViewChild('tooltipCellTemplate') private tooltipCellTemplate!: TemplateRef<any>;
  @Input('myGridCellToolTip') customContent?: (dataItem: any) => string;

  constructor(public column: KendoGridColumnComponent) {}

  ngOnInit(): void {
    this.column.cellTemplate = this.tooltipCellTemplate;
  }
}

自定义内容的使用示例 #

<kendo-grid-column 
  field="firstName" 
  title="First Name" 
  [myGridCellToolTip]="(item) => '用户全名：' + item.firstName + ' ' + item.lastName">
</kendo-grid-column>

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