# @frxjs/ngx-timeline 中文文档

规范地址：https://npmcn.com/package/%40frxjs/ngx-timeline/

版本：22\.0\.1
npm 元数据更新时间：2026-06-22T23:12:42.240Z
中文译文更新时间：2026-11-15T15:31:00.678Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40frxjs/ngx-timeline
原文对照：https://npmcn.com/package/%40frxjs/ngx-timeline/?lang=original
项目主页：https://github.com/emanuelefricano93/frxjs-Ngx-Timeline#readme
源码仓库：https://github.com/emanuelefricano93/frxjs-Ngx-Timeline

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

- 包体积（解压后）：139 kB，5 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/cdk ^22\.0\.1，@angular/common ^22\.0\.1，@angular/core ^22\.0\.1
- 首次发布：2021-04-15T22:45:51.714Z
- 最新版本发布：2026-06-22T23:12:42.104Z
- 近 30 天下载量：9066（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：66（近 12 个月 3 个）

## 中文简介

这个角化库的主要目标是让你有可能在你的应用中整合一个时长.  
22.0.0版本与角22相容.  
走开 [这里](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) 并发现所有可能

## 安装

```sh
npm install @frxjs/ngx-timeline
```

也可以使用：`pnpm add @frxjs/ngx-timeline`、`yarn add @frxjs/ngx-timeline`、`bun add @frxjs/ngx-timeline`

## README

# Ngx 时间线 ![check-code-coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)

这个角化库的主要目标是让你有可能在你的应用中整合一个时长.  
22.0.0版本与角22相容.  
走开 [这里](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/) 并发现时间线的所有可能配置

![image](https://user-images.githubusercontent.com/26500344/130092921-8338496a-31df-46fa-b75f-40989eb53d33.png)

图1 - 预览 [时间线示例配置页面](https://emanuelefricano93.github.io/frxjs-Ngx-Timeline/)

  
  

## 安装

运行以下命令以安装库

```
npm install @frxjs/ngx-timeline
```

## 用法实例

在安装库并在导入模块中包含 NgxTimelineModule 后, 您可以在模板中添加一个示例, 以显示您的时长

```html
<ngx-timeline [events]="events"></ngx-timeline>
<ngx-timeline [events]="events" [langCode]="'it'"></ngx-timeline>
<ngx-timeline [events]="events" [langCode]="'it'" [enableAnimation]="false"></ngx-timeline>
```

## 配置

### 投入

| 输入名称 | 解释 | 强制性 | 类型/支持值 | 默认值 |
| --- | --- | --- | --- | --- |
| 事件 | 要显示的事件列表 | 对 | Ngx 时间线事件 | 无默认 |
| langCode 代码 | 语言代码用于格式日期 | 没有 | 
-   'de' (德语)
-   'en' (英语)
-   'es' (西班牙语)
-   'fr' (法语)
-   (意大利语)
-   'nb' (挪威语)
-   'pl' (波兰语)
-   'pt' (葡萄牙语)
-   'ru' (俄语)
-   's' (斯洛文尼亚语)
-   'r' (土耳其语)

 | '来' |
| 启用动画 | 用于启用或禁用动画的布尔 | 没有 | 布尔 | 真实 |
| 倒转顺序 | Boolean 用于倒转排序顺序( 默认先旧) | 没有 | 布尔 | 虚假 |
| 虚拟滚动 | 用于启用或禁用虚拟滚动的布尔 | 没有 | 布尔 | 虚假 |
| 虚拟滚动项目大小 | 用于虚拟滚动的单个项目的像素数 | 没有 | 编号 | 100个 |
| 虚拟滚动Max BufferPx | 虚拟卷轴缓冲器的最大像素数 | 没有 | 编号 | 200个 |
| 虚拟滚动MinBufferPx | 视野外的缓冲最小量 | 没有 | 编号 | 100个 |
| 组事件 | 用于分组事件的逻辑 | 没有 | enum NgxTimeline 事件组 | NgxTimeline Event Group. MONTH YEAR (英语) |
| 方向 | 时间表的方向 | 没有 | enum Ngx 时间线方向 | Ngx 时间线 定向 |
| 更改 | 用于将事件放入 LEFT 或 Right 的逻辑 | 没有 | enum NgxTimeline EventChangeSide (英语: | NgxTimeline EventChangeSide.ON different DAY IN GROUP (英语) |
| 周期图解 | 自定义模板在一组事件之前显示 | 没有 | `TemplateRef<unknown>` | 无默认 |
| 事件自定义模板 | 自定义模板以显示单个事件 | 没有 | `TemplateRef<unknown>` | 无默认 |
| 集成图解 | 自定义模板显示分隔符图标 | 没有 | `TemplateRef<unknown>` | 无默认 |
| 即时客户端 | 自定义模板显示侧日期 | 没有 | `TemplateRef<unknown>` | 无默认 |
| 内端客户端 | 自定义模板显示内在事件 | 没有 | `TemplateRef<unknown>` | 无默认 |
| 事件描述 | 显示描述的自定义模板 | 没有 | `TemplateRef<unknown>` | 无默认 |

### 产出

| 输出名称 | 解释 | 强制性 | 类型/支持值 | 默认值 |
| --- | --- | --- | --- | --- |
| 点击 Emiter | 输出点击事件发送器 | 没有 | `OutputEmitterRef<NgxTimelineItem>` | 无默认 |

### 类型和元素

```typescript
interface NgxTimelineEvent {
  timestamp: Date;
  title?: string;
  description?: string;
  id?: any;
  itemPosition?: NgxTimelineItemPosition;
}
```

```typescript
enum NgxTimelineEventGroup {
  YEAR = 'YEAR',
  MONTH_YEAR = 'MONTH_YEAR',
  DAY_MONTH_YEAR = 'DAY_MONTH_YEAR'
}
```

```typescript
export enum NgxTimelineOrientation {
  HORIZONTAL = 'HORIZONTAL',
  VERTICAL = 'VERTICAL',
}
```

```typescript
enum NgxTimelineEventChangeSide {
  ALL = 'ALL',
  ALL_IN_GROUP = 'ALL_IN_GROUP',
  ON_DIFFERENT_DAY_IN_GROUP = 'ON_DIFFERENT_DAY_IN_GROUP',
  ON_DIFFERENT_HMS_IN_GROUP = 'ON_DIFFERENT_HMS_IN_GROUP',
  ON_DIFFERENT_MONTH_IN_GROUP = 'ON_DIFFERENT_MONTH_IN_GROUP'
}
```

### 自定义 支持的主题

这是习惯主题的一个例子,可以通过ng级指令适用于图书馆的容器。 这样您就可以重新定义一些在库内定义和使用的变量,并且更容易覆盖一些属性

```scss
.custom-theme {
    --ngx-timeline-icon: black;
    --ngx-timeline-period-inner-container: black;
    --ngx-timeline-line-background: black;
}
```

### 带有自定义模板的示例

```html
  <ng-template #periodCustomTemplate let-period=period let-index=index let-event=event>
    <div [ngClass]="{'transparent first-line': !index}" class="line"></div>
    <div class="period-container">
      <p>
        {{index}} - {{period | json}}
      </p>
    </div>
    <div class="line"></div>
  </ng-template>
```

```html
  <ng-template #centerIconCustomTemplate let-index=index let-event=event>
    <div class="icon-container">
      <img src="assets/image.png">
    </div>
  </ng-template>
```

```html
  <ng-template #innerEventCustomTemplate let-event=event>
    <div class="event" (click)="handleClick(event)">
      {{event | json}}
    </div>
  </ng-template>
```

```html
  <ng-template #eventDescriptionCustomTemplate let-event=event>
    <p class="event-info-description">{{event?.eventInfo?.description}}</p>
  </ng-template>
```

```html
  <ng-template #eventCustomTemplate let-event=event let-colSidePosition=colSidePosition>
    <div class="event" (click)="handleClick(event)">
      {{event | json}}
    </div>
  </ng-template>
```

```html
  <ng-template #dateInstantCustomTemplate let-item=item>
    <span>
      {{item | json}}
    </span>
  </ng-template>
```

  
  

## 如何捐款

首先,为了追踪一切,打开一个描述问题的问题或一个缺失的功能,您想要添加到 lib 中.

为开始捐款:

-   `npm run watch-lib` (你正在用 -- watch 选项构建 lib)
-   `npm run start-dev` (你正在连接 lib 并启动演示应用)

每次您修改您 lib 中的代码时, 任何更新都会触发应用程序的再装入. 当您的代码将准备好时, 创建一个 Pull 请求, 并将链接放在您之前打开的问题下的评论中 . 现在是享受和开始代码的时候了.

提前感谢您的捐款

## 如何部署新版本(仅供维护者使用)

在测试了100%测试覆盖率的固定或新特性后:

-   npm 运行 lint: fix
-   npm 运行准备 - github 页面
-   npm 运行新版本补丁
-   git 推动 -- -- tags
-   git 推动
-   npm 运行发布

## 常见问题

### @frxjs/ngx-timeline 是什么？

这个角化库的主要目标是让你有可能在你的应用中整合一个时长\. 22\.0\.0版本与角22相容\. 走开 这里 并发现所有可能

### 如何安装 @frxjs/ngx-timeline？

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

### @frxjs/ngx-timeline 支持 TypeScript 吗？

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

### @frxjs/ngx-timeline 支持 ESM 还是 CommonJS？

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

### @frxjs/ngx-timeline 可以商用吗？

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

### @frxjs/ngx-timeline 的下载量有多少？

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

### @frxjs/ngx-timeline 还在维护吗？

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