在KendoUI Grid中使用Angular内容投影<ng-content>失效问题求助

问题原因 #

Kendo UI for Angular的Grid组件内部依赖@ContentChild/@ContentChildren来识别特定子组件（如kendo-grid-column、kendo-grid-toolbar）。如果封装组件只是把ng-content放在Grid外部，或者没有让投影内容直接成为Grid的直接子节点，Grid的内部查询机制就无法捕获到这些定制内容，导致投影失效。

解决方案：针对性内容投影 #

在封装组件的模板中，将ng-content直接嵌入Kendo Grid标签内部，并通过select属性精准匹配Kendo的特定组件/指令选择器，让投影内容成为Grid的直接子元素，这样Grid就能正确识别并渲染这些定制内容。

1. 封装通用Grid组件 #

创建app-common-grid组件，内置过滤、排序等通用配置，同时预留投影位置给定制工具栏和列：

common-grid.component.html

<kendo-grid
  [data]="data"
  [filterable]="true"
  [sortable]="true"
  [pageable]="true"
  <!-- 其他通用配置 -->
>
  <!-- 投影自定义工具栏（匹配kendo-grid-toolbar指令） -->
  <ng-content select="[kendo-grid-toolbar]"></ng-content>

  <!-- 投影自定义列（匹配kendo-grid-column组件） -->
  <ng-content select="kendo-grid-column"></ng-content>

  <!-- 通用默认列（可根据需求调整） -->
  <kendo-grid-column field="id" title="ID" width="80"></kendo-grid-column>
  <kendo-grid-column field="name" title="名称"></kendo-grid-column>
</kendo-grid>

common-grid.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-common-grid',
  templateUrl: './common-grid.component.html'
})
export class CommonGridComponent {
  @Input() data: any[] = [];
  // 可添加更多通用输入属性，比如分页配置、高度等
}

2. 使用封装组件并注入定制内容 #

在父组件中直接像使用原生Kendo Grid一样，传入定制的工具栏和命令列：

app.component.html

<app-common-grid [data]="gridData">
  <!-- 定制工具栏 -->
  <div kendo-grid-toolbar>
    <button kendoButton themeColor="primary" (click)="addNewItem()">新增数据</button>
  </div>

  <!-- 定制命令列 -->
  <kendo-grid-column title="操作" width="180">
    <ng-template kendoGridCellTemplate let-item>
      <button kendoButton size="small" (click)="editItem(item)">编辑</button>
      <button kendoButton size="small" themeColor="danger" (click)="deleteItem(item)">删除</button>
    </ng-template>
  </kendo-grid-column>
</app-common-grid>

3. 更灵活的模板注入（可选） #

如果需要更动态的内容控制（比如根据条件显示不同定制内容），可以通过@Input传递TemplateRef：

修改common-grid.component.ts

import { Component, Input, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-common-grid',
  templateUrl: './common-grid.component.html'
})
export class CommonGridComponent {
  @Input() data: any[] = [];
  @Input() customToolbar?: TemplateRef<any>;
}

修改common-grid.component.html

<kendo-grid [data]="data" [filterable]="true" [sortable]="true">
  <ng-template kendoGridToolbarTemplate *ngIf="customToolbar" [ngTemplateOutlet]="customToolbar"></ng-template>

  <!-- 通用列和投影列 -->
  <ng-content select="kendo-grid-column"></ng-content>
  <kendo-grid-column field="id" title="ID"></kendo-grid-column>
</kendo-grid>

父组件使用方式

<app-common-grid [data]="gridData" [customToolbar]="toolbarTemplate">
  <ng-template #toolbarTemplate>
    <button kendoButton (click)="batchExport()">批量导出</button>
  </ng-template>

  <!-- 定制列依然用内容投影 -->
  <kendo-grid-column title="状态">
    <ng-template kendoGridCellTemplate let-item>
      <span [class]="item.status === 'active' ? 'text-green' : 'text-gray'">
        {{ item.status === 'active' ? '激活' : '禁用' }}
      </span>
    </ng-template>
  </kendo-grid-column>
</app-common-grid>

关键要点 #

• 必须让定制内容（工具栏、列）成为Kendo Grid的直接子节点，才能被Grid的内部内容查询机制识别。
• 使用ng-content select时，要精准匹配Kendo的组件选择器（如kendo-grid-column）或指令属性（如[kendo-grid-toolbar]）。
• 通用配置统一放在封装组件中，定制内容通过投影或模板注入按需添加，既保证标准化又保留灵活性。

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