# @agility-workbench/angular-grid 中文文档

规范地址：https://npmcn.com/package/%40agility-workbench/angular-grid/

版本：1\.15\.0
npm 元数据更新时间：2026-11-02T11:45:50.351Z
中文译文更新时间：2026-11-09T21:06:57.743Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40agility-workbench/angular-grid
原文对照：https://npmcn.com/package/%40agility-workbench/angular-grid/?lang=original
项目主页：https://agilityworkbench.dev/
源码仓库：https://github.com/agility-workbench/agility-workbench

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：161 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^20\.19\.0 \|\| ^22\.12\.0 \|\| \>=24\.0\.0
- 运行依赖：2 个
- peer 依赖：@angular/core ^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0
- 首次发布：2026-08-24T11:04:49.999Z
- 最新版本发布：2026-11-02T11:45:49.971Z
- 近 30 天下载量：1730（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

@agility-workbench/grid的角绑定-高性能数据网. 支持角20.3到22.

## 安装

```sh
npm install @agility-workbench/angular-grid
```

也可以使用：`pnpm add @agility-workbench/angular-grid`、`yarn add @agility-workbench/angular-grid`、`bun add @agility-workbench/angular-grid`

## README

# @agility-workbench/angular-grid (中文(简体) )

角绑定 [`@agility-workbench/grid`](https://www.npmjs.com/package/@agility-workbench/grid) —— 说 高性能数据网。 提供独立的 `<awb-grid>` 组件和再出口 完整核心 API,这样您就可以从一个地方导入所有您需要的东西 。 支持角20.3 在20.19+节点上通过22个(基于区和无区应用).

每次发布都在文件网站上 [更改日志](https://agilityworkbench.dev/docs/changelog)。 。 。 .

## 安装

```bash
npm install @agility-workbench/angular-grid
```

`@agility-workbench/grid` 以依赖方式自动安装; `@angular/core` (20.3 -- 22个, 每个主机与包装的文物核对) 是一个同行依赖 您的应用程序提供的.

## 快开始

```ts
import { Component } from "@angular/core";
import {
  AwbGrid,
  ColumnType,
  type IGridAPI,
  type NgColDef,
} from "@agility-workbench/angular-grid";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [AwbGrid],
  template: `
    <div style="height: 400px">
      <awb-grid
        [rowData]="rowData"
        [columnDefs]="columnDefs"
        rowIdKey="id"
        [rowNumbers]="true"
        (gridReady)="onGridReady($event)"
      />
    </div>
  `,
})
export class ExampleComponent {
  columnDefs: NgColDef[] = [
    { key: "name", label: "Name", type: ColumnType.STRING },
    { key: "price", label: "Price", type: ColumnType.NUMBER },
  ];

  rowData = [
    { id: "1", name: "Widget", price: 9.99 },
    { id: "2", name: "Gadget", price: 14.5 },
  ];

  onGridReady(api: IGridAPI): void {
    // Imperative API: sorting, selection, editing, exports, view state, …
  }
}
```

网格填充主机元素——给 `<awb-grid>` (或作一卷)一高. 构成部分是: 也可通过模板参考: `<awb-grid #grid="awbGrid" />` → `grid.api`。 。 。 .

`[quickFilter]` 是一个实时输入——在每个可见的栏目进行全球搜索。 它过滤行由 默认,或 `behavior: "find"` 将每行放在原位上,突出显示匹配单元格 一个匹配计数器, `Enter` 编号 : `Shift+Enter` 脚步,和 `showBehaviorToggle` 以允许最终用户 切换 `(quickFilterFindChanged)` 输出报告匹配数和活动匹配数。 见 用于匹配模式和找到的可搜索内容的核心 README.

网格选项是信号输入,包括枢轴模式和工作表: `[pivotMode]` 编号 : `[pivotColumns]` 被活化(通过必需的 API 连接,所以指定的值在 `gridReady` 而不为覆写, `[pivotColumnMoveMode]` 是现场直播, `[pivotResultColumnDef]` 编号 : `[maxPivotColumns]` 编号 : `[pivotNoValuesMessage]` 编号 : `[pivotEmptyMessage]` 是创建时间,以及 `[sheets]` 使页脚标签条具有与应用程序自有的持久性合同相同的 `[savedViews]`中,请查看核心 README 中枢模式和工作表.

大多数投入是现场的。 网格只在创建时读取的`rowHeight`, (中文(简体) ), `getRowId`, (中文(简体) ), `rowIdKey`, (中文(简体) ), `rowModelType`, (中文(简体) ), `defaultColDef`, (中文(简体) ), `groupColumnDef`, (中文(简体) ), `pivotResultColumnDef`, (中文(简体) ), `initialSort`\- 核心的 - 核心的 - 核心的 `CREATION_ONLY_OPTION_KEYS`,减去桥接输入) 变化; 开发模式`isDevMode()`网格记录一个 `console.warn` 命名输入时 发生。 重新创建 `<awb-grid>` (例如,在 `@if`键 `@for`适用 这样的变化。 文献站点的Angular页有完整的活Vs-创建表.

产出: `(gridReady)`, (中文(简体) ), `(cellClicked)`, (中文(简体) ), `(rowClicked)`, (中文(简体) ), `(cellDoubleClicked)`, (中文(简体) ), `(rowDoubleClicked)`, (中文(简体) ), `(cellValueChanged)`, (中文(简体) ), `(selectionChanged)`, (中文(简体) ), `(sortChanged)`, (中文(简体) ), `(filterChanged)`, (中文(简体) ), `(quickFilterFindChanged)`, (中文(简体) ), `(historyChanged)`, (中文(简体) ), `(columnsChanged)`, (中文(简体) ), `(paginationChanged)` 财务报告和审定财务报表 `(gridError)` (核心内容) `error` 事件——没有 `(error)`,哪个角 还将作为原住DOM的听众在主机上捆绑起来. `(columnsChanged)` 财务报告和审定财务报表 `(sortChanged)` 携带 `source: "user" | "api"`; 持续列状态 `"user"` 因此,恢复它 从来没有回声 回来 还有什么: `api.on(eventName, handler)`。 。 。 .

## 样式

无所事事——网格在附着时会发出自己的样式表,每文档一次,以及 一次每个阴影根 对于一个内部的网格.

严格的内容安全政策 `style-src 'unsafe-inline'`,通过 `styleNonce` 输入(page-global,因此每个网格使用相同的值). 装入样式表 相反,通过 `angular.json` 样式或全局导入 `@agility-workbench/grid/styles.css` 设置 `suppressStyleInjection` 每个网格,所以两个 副本不会在级联中战斗.

## 网格中的角构件

列定义接受角构件类别,只要核心接受类构件 `cellRenderer`, (中文(简体) ), `cellEditor`, (中文(简体) ), `tooltipComponent`, (中文(简体) ), `headerTooltip`, (中文(简体) ), `actionFrameComponent`,则 设置过滤器组件 `filterParams`和页眉组件 `headerComponent` (标题) 内容)和 `headerCellComponent` (整个信头单元格;合同 `IHeaderNgComp`) (中文(简体) ). 相同档次 已调整为 `[defaultColDef]`, (中文(简体) ), `[groupColumnDef]`,以及 `[pivotResultColumnDef]`A. 构成部分 通过命名的输入接收其参数 `params` 或通过执行 `awbInit(params)` (加上可选) `awbRefresh(params)`:

```ts
import { Component, input } from "@angular/core";
import type { CellRendererParams } from "@agility-workbench/angular-grid";

@Component({
  standalone: true,
  template: `<strong>{{ params()?.value }}</strong>`,
})
export class BoldCell {
  readonly params = input<CellRendererParams>();
}

const columnDefs: NgColDef[] = [{ key: "name", label: "Name", cellRenderer: BoldCell }];
```

执行单元格编辑器 `ICellEditorNgComp` (单位:千美元)`getValue()` 加可选 `focus`, (中文(简体) ), `isParsed`, (中文(简体) ), `isCancelBeforeStart`) (中文(简体) ). 菜单项从 `getColumnMenuItems` 编号 : `bodyContextMenu` 编号 : `multiColumnMenu` 可使用 `TemplateRef`他们的 `left`编号 :`right` 槽数(`NgMenuItem`) (中文(简体) ).

## 许可证

[麻省理工学院](https://npmcn.com/package/%40agility-workbench/angular-grid/LICENSE)

## 常见问题

### @agility-workbench/angular-grid 是什么？

@agility-workbench/grid的角绑定-高性能数据网\. 支持角20\.3到22\.

### 如何安装 @agility-workbench/angular-grid？

在项目目录运行 npm install @agility-workbench/angular-grid，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^20\.3\.0 \|\| ^21\.0\.0 \|\| ^22\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @agility-workbench/angular-grid 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @agility-workbench/angular-grid 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @agility-workbench/angular-grid 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^20\.19\.0 \|\| ^22\.12\.0 \|\| \>=24\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @agility-workbench/angular-grid 可以商用吗？

@agility-workbench/angular-grid 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @agility-workbench/angular-grid 的下载量有多少？

根据 npm 官方下载统计，@agility-workbench/angular-grid 在 2026/10/05 – 2026/11/03 这 30 天内被下载 1,730 次，日均约 58 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @agility-workbench/angular-grid 还在维护吗？

最新版本 1\.15\.0 发布于 2026/11/02（7 天前）；至今共发布 17 个版本，其中过去 12 个月发布了 17 个；首次发布于 2026/08/24。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。