# @blotch/angular-lynx 中文文档

规范地址：https://npmcn.com/package/%40blotch/angular-lynx/

版本：22\.2\.18
npm 元数据更新时间：2026-11-08T01:59:35.235Z
中文译文更新时间：2026-11-08T08:06:35.972Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40blotch/angular-lynx
原文对照：https://npmcn.com/package/%40blotch/angular-lynx/?lang=original
项目主页：https://github.com/Blotch-Smart-Frames/AngularLynx#readme
源码仓库：https://github.com/Blotch-Smart-Frames/AngularLynx

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

- 包体积（解压后）：2.5 MB，44 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core ^22\.2\.0，@angular/forms ^22\.2\.0，@angular/common ^22\.2\.0，@angular/router ^22\.2\.0，@angular/localize ^22\.2\.0，@angular/platform-browser ^22\.2\.0
- 首次发布：2026-10-12T03:03:34.566Z
- 最新版本发布：2026-11-08T01:59:34.919Z
- 近 30 天下载量：3815（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 20 个）

## 中文简介

Lynx 跨平台本地用户界面框架的角渲染器

## 安装

```sh
npm install @blotch/angular-lynx
```

也可以使用：`pnpm add @blotch/angular-lynx`、`yarn add @blotch/angular-lynx`、`bun add @blotch/angular-lynx`

## README

# @blotch/angular-lynx (英语)

角成像器,用于 [林克丝](https://lynxjs.org/). 写入 Angular 组件,通过 Lynx 引擎向原生iOS,Android和Web渲染.

## 快速启动

```bash
npm create angular-lynx my-app
```

或者在已有的角工程中添加:

```bash
ng add @blotch/angular-lynx
```

然后像任何Angular应用程序一样工作: `ng serve`, (中文(简体) ), `ng build`, (中文(简体) ), `ng test`,以及 `ng generate component`,它使组件与 Lynx 元素. `ng update @blotch/angular-lynx` 一起更新每个 AngularLynx 软件包.

## 特征

-   有信号的独立部件, `@if`编号 :`@for`编号 :`@switch`编和管
-   为浏览器编写的模板: 常见的 HTML 标记渲染为它们所代表的 Lynx 元素(`<div>` 作为 `<view>`, (中文(简体) ), `<p>` 作为 `<text>`, (中文(简体) ), `<img>` 作为 `<image>`),DOM事件 Lynx也发送,例如: `(click)` 财务报告和审定财务报表 `(input)`运行
-   无区变化探测——信号为主反应模型
-   全角路由器,为 Lynx 提供模拟导航,包括 `routerLink` 财务报告和审定财务报表 `routerLinkActive` 关于任何元素
-   手势——自来水、锅、长压、放出、捏出、有成分的旋转
-   `document:`, (中文(简体) ), `window:` 财务报告和审定财务报表 `body:` 听众在屏幕上听到触摸(指向、触摸和触摸) `click` 和窗口 `resize`,与 `window.innerWidth` 财务报告和审定财务报表 `innerHeight` 屏幕大小
-   动画——CSS的过渡、关键框架和方案 `animate()` API 密码
-   内容投射、门户、, `@defer`和懒惰的路线
-   `IntersectionObserver` 关于Lynx元素,来自Lynx的曝光事件,用于为浏览器写入代码
-   `<canvas>` 3D的WebGL2: 三.j和角-三,带有指针事件, `ResizeObserver` 和图像加载, 在应用程序中 `ng build --platform ios|android` 和网络预览
-   Tailwind CSS 4, 建筑为 Lynx 重写其 CSS( 或 Tailwind CSS 3, 使用 `@lynx-js/tailwind-preset`(中文(简体) )

## 文档

完整文档和指南 [(原始内容存档于2017-10-21). angulallynx.js.org](https://angularlynx.js.org/)。 。 。 .

* * *

## 路线

`provideRouter()` 从 `@blotch/angular-lynx` 设置有内幕历史的Angular路由器. 其他一切来自 `@angular/router`就像网络上一样, `routerLink` 财务报告和审定财务报表 `routerLinkActive` 包括:

```typescript
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';

@Component({
  selector: 'app-root',
  imports: [LYNX_ELEMENTS, RouterOutlet, RouterLink, RouterLinkActive],
  template: `
    <view routerLink="/settings" routerLinkActive="active">
      <text>Settings</text>
    </view>
    <router-outlet />
  `,
})
export class App {}
```

-   对元件的自拍导航: 渲染器发送 Lynx 的 `tap` 改为 `click` 听众,就像Lynx的Web所做的 `RouterLink` 监听 `click`。 。 。 .
-   当连接的路线是活跃的, `routerLinkActive` 增加其类和 `LYNX_ELEMENTS` 添加 `selected` 对元素的 `accessibility-traits`,保持自己的(`LynxRouterLinkActive`) (中文(简体) ). 在组件的主机上, 列表 `LynxRouterLinkActive` 内 `hostDirectives` 旁边 `RouterLinkActive`。 。 。 .
-   事件处理器可以直接导航,使用 `Router.navigate()` 或者说 `Location.back()`。 。 。 .

## 动画 API

有三种动画方法可供使用,均在Lynx引擎上本土运行.

### CSS 过渡

应用 `transition` 在您的样式表。 Lynx 内插属性自动改变 .

```css
.box {
  background-color: #6200ee;
  transition: background-color 0.5s ease-in-out;
}

.box-active {
  background-color: #03dac6;
}
```

```html
<view class="box" [class.box-active]="isActive()" (bindtap)="toggle()">
  <text>Tap me</text>
</view>
```

### CSS 关键框架动画

定义 `@keyframes` 在样式表中,并通过类切换应用.

```css
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.spinning {
  animation: rotate 2s linear infinite;
}
```

```html
<view class="box" [class.spinning]="spin()">
  <text>Rotating</text>
</view>
```

### JavaScript 动画 API

使用 `element.animate()` 用于方案控制的本土要素参考。 给林克斯打电话 `__ElementAnimate` 车盖下的PAPI.

```typescript
import { Component, viewChild, type ElementRef } from '@angular/core';
import { type LynxAnimation } from '@blotch/angular-lynx';

@Component({
  selector: 'app-example',
  template: `
    <view #box class="box" (bindtap)="runAnimation()">
      <text>Tap to animate</text>
    </view>
  `,
})
export class ExampleComponent {
  boxRef = viewChild<ElementRef>('box');
  #animation: LynxAnimation | null = null;

  runAnimation(): void {
    const el = this.boxRef();
    if (!el) return;

    // Cancel previous animation before starting a new one.
    this.#animation?.cancel();

    this.#animation = el.nativeElement.animate(
      [
        { transform: 'scale(1)', opacity: 1 },
        { transform: 'scale(1.3)', opacity: 0.7 },
        { transform: 'scale(1)', opacity: 1 },
      ],
      {
        duration: 600,
        easing: 'ease-in-out',
      },
    );
  }
}
```

#### `animate()` API 密码

```typescript
element.nativeElement.animate(
  keyframes: Record<string, string | number>[],
  options?: number | LynxAnimationOptions,
): LynxAnimation
```

**参数:**

| 参数 | 类型 | 说明 |
| --- | --- | --- |
| `keyframes` | `Record<string, string | number>[]` | 密钥框架对象阵列 。 每个对象将 CSS 属性名称映射到值 . |
| `options` | `number | LynxAnimationOptions` | 持续时间为ms(短手)或完整选项对象. |

**`LynxAnimationOptions`数字 :**

| 选项 | 类型 | 说明 |
| --- | --- | --- |
| `duration` | `number | string` | 动画持续时间以毫秒计. |
| `delay` | `number | string` | 动画开始前的延迟 . |
| `iterations` 编号 : `iterationCount` | `number | string` | 重复次数。 使用 `Infinity` 为无限. |
| `easing` 编号 : `timingFunction` | `string` | 简化函数( E)`linear`, (中文(简体) ), `ease-in`, (中文(简体) ), `ease-out`, (中文(简体) ), `ease-in-out`, (中文(简体) ), `cubic-bezier(...)`) (中文(简体) ). |
| `fill` 编号 : `fillMode` | `string` | 动画之后风格如何持续( Name`none`, (中文(简体) ), `forwards`, (中文(简体) ), `backwards`, (中文(简体) ), `both`) (中文(简体) ). |
| `direction` | `string` | 播放方向( N)`normal`, (中文(简体) ), `reverse`, (中文(简体) ), `alternate`, (中文(简体) ), `alternate-reverse`) (中文(简体) ). |
| `name` | `string` | 可选动画名称( 如果省略则自动生成) . |

**回返情况:** `LynxAnimation` 使用控制方法:

| 方法 | 说明 |
| --- | --- |
| `play()` | 恢复暂停的动画. |
| `pause()` | 暂停动画. |
| `cancel()` | 取消并清理动画. |

#### 动画事件

Lynx在元素上放出标准动画事件. 使用绑定前缀事件名在模板中聆听 :

```html
<view
  class="animated-box"
  (bindanimationend)="onAnimationEnd($event)"
  (bindtransitionend)="onTransitionEnd($event)"
>
  <text>Animated</text>
</view>
```

可用事件 : `animationstart`, (中文(简体) ), `animationend`, (中文(简体) ), `animationcancel`, (中文(简体) ), `animationiteration`, (中文(简体) ), `transitionstart`, (中文(简体) ), `transitionend`, (中文(简体) ), `transitioncancel`。 。 。 .

#### 重要说明

-   这个 `animate()` API为 **仅主线**。在背景线条上调用它会丢出一个错误.
-   打电话 `animate()` 直接从事件处理器;不需要 `setTimeout`。 。 。 .

## 常见问题

### @blotch/angular-lynx 是什么？

Lynx 跨平台本地用户界面框架的角渲染器

### 如何安装 @blotch/angular-lynx？

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

### @blotch/angular-lynx 支持 TypeScript 吗？

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

### @blotch/angular-lynx 支持 ESM 还是 CommonJS？

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

### @blotch/angular-lynx 可以商用吗？

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

### @blotch/angular-lynx 的下载量有多少？

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

### @blotch/angular-lynx 还在维护吗？

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