# @angular-extensions/model 中文文档
规范地址：https://npmcn.com/package/%40angular-extensions/model/
版本：12\.0\.0
npm 元数据更新时间：2022-04-04T14:07:31.608Z
中文译文更新时间：2026-11-06T04:25:54.076Z
软件包许可：MIT
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40angular-extensions/model
原文对照：https://npmcn.com/package/%40angular-extensions/model/?lang=original
项目主页：https://github.com/angular-extensions/model#readme
源码仓库：https://github.com/angular-extensions/model
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：57.5 kB，25 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@angular/core ^12\.0\.0，@angular/cli ^12\.0\.0，rxjs ^6\.6\.0，typescript ~4\.3\.0
- 首次发布：2018-09-28T11:11:41.768Z
- 最新版本发布：2021-09-21T15:44:16.371Z
- 近 30 天下载量：5165（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：26（近 12 个月 0 个）
## 中文简介
角模型 - 有最小化API的简单状态管理,单向数据流,多模式支持和被暴露为RxJS可观察的数据.
## 安装
```sh
npm install @angular-extensions/model
```
也可以使用：`pnpm add @angular-extensions/model`、`yarn add @angular-extensions/model`、`bun add @angular-extensions/model`
## README
# 角模型 - @angular-extension/模型
以 [@tomastrajan (英语)](https://twitter.com/tomastrajan)
[](https://www.npmjs.com/package/@angular-extensions/model) [](https://github.com/angular-extensions/model/blob/master/LICENSE) [](https://www.npmjs.com/package/@angular-extensions/model) [](https://travis-ci.org/angular-extensions/model) [](https://codecov.io/gh/angular-extensions/model) [](https://conventionalcommits.org/) [](https://twitter.com/tomastrajan)
简单的状态管理 最小化的 API, 一种方式的数据流, 被曝光为RxJS可观测的多模型支持和不可变数据.
- [Live Demo (Stackblitz) (英语)](https://stackblitz.com/edit/angular-extensions-model?file=src%2Fapp%2Ftodo%2Ftodo.service.ts)
- [开始](https://npmcn.com/package/%40angular-extensions/model/#readme-getting-started-in-angular-cli-projects)
- [行为守则](https://github.com/angular-extensions/model/blob/master/CODE_OF_CONDUCT.md)
- [捐款](https://github.com/angular-extensions/model/blob/master/CONTRIBUTING.md)
- [更改日志](https://github.com/angular-extensions/model/blob/master/CHANGELOG.md)
- [文档](https://tomastrajan.github.io/angular-model-pattern-example) 网站
- [高级使用模式](https://tomastrajan.github.io/angular-model-pattern-example#/advanced) 以更多方式和实例
- [博客](https://medium.com/@tomastrajan/model-pattern-for-angular-state-management-6cb4f0bfed87) 关于角模型模式的介绍
## 文档
## 开始于角CLI项目
1. 安装 `@angular-extensions/model` 图书馆
```
ng add @angular-extensions/model
```
2. 生成模型服务
```
ng g @angular-extensions/model:model examples/todo --items
```
3. 在组件中使用模型服务 。 让我们产生新的 `todo` 组件
```
ng g component examples/todo --inline-template
```
然后按以下例子调整组件执行
```ts
import { Component } from '@angular/core';
import { TodoService } from './todo.service';
@Component({
selector: 'app-todo',
template: `
Todos ({{ todos.length }})
`,
styleUrls: ['./todo.component.css']
})
export class TodoComponent {
constructor(public todoService: TodoService) {}
addTodo() {
this.todoService.addTodo({ prop: 'New todo!' });
}
}
```
4. 使用我们的新 `` 模板中的组件 `app.component.html`
请注意您可能使用不同的应用程序前缀 `app-` 因此相应调整.
## 型号 API
该模型有一个小型API,如上图所示.
- `get(): T` - 返回当前模型值
- `set(data: T): void` - 设定新的模型值
- `data$: Observable` - 观察模型数据,每一次通话 `set(newData)` 将推动新的模式状态到这个可观测状态(数据是: **默认不可变** 但它可以使用下文所述提供的其他一种工厂功能来改变)
检查已生成 `todo.service.ts` 以实例说明应如何使用该模型. 一般来说,该服务将实施一些方法来回收当前模型状态,进行变异并让新状态回到模型. 然后,模型将注意将不可改变的新状态副本推向使用 `data$`。 。 。 .
#### 可用的模型厂商
如示例所示,模型是使用模型厂创建的 `todo.service.ts`,检查行 `this.model = this.modelFactory.create(initialData);`。 。 。 . 提供多个模范工厂,以支持不同的使用案例:
- `create(initialData: T): Model` - 创建默认不可改变的基本模型(`JSON` 克隆)
- `createMutable(initialData: T): Model` - 创建没有不可改变性保障的模型(你必须确保模型消费者不会变异和腐败的模型状态),但表现要多得多,因为整个克隆步骤被跳过
- `createMutableWithSharedSubscription(initialData: T): Model` - 通过跳过不可改变性和所有消费者共享订阅(例如许多组件订阅单一模式),获得更大的业绩
- `createWithCustomClone(initialData: T, clone: (data: T) => T)` - 通过传递您的自定义克隆功能来创建不可改变的模型(`JSON` 克隆不支持包含函数或正则克克氏体的特性,因此可能需要自定义的克隆功能)
- `createWithConfig(config)` - 通过在配置对象中传递所有配置属性的值来创建模型(`initialData: T`, (中文(简体) ), `immutable: boolean`, (中文(简体) ), `sharedSubscription: boolean`, (中文(简体) ), `clone: (data: T) => T`(中文(简体) )
## 模型示意图 API
模型服务使用Angular CLI生成. 这是第三党的图案 所以我们必须 运行时指定 `ng g` 像这样命令 `ng g @angular-extensions/model: `。 。 。 . 图表目前只包含一个叫做 `model`。 。 。 .
#### 基本用途
```
ng g @angular-extensions/model:model example/todo
```
#### 支持的选项
- `--items` - 建立收集物品的服务(将曝光) `todos$: Observable;` 改为 `todo$: Observable`(中文(简体) )
- `--flat` - 直接在`examples` 不创建名称的文件夹的文件夹 `todos` (默认 : `false`(中文(简体) )
- `--spec` - 生成服务测试文件( 默认 ): `true`(中文(简体) )
- `--module` - 将决定如何将服务登记在Angular依赖性注射语境中(服务将使用 `providedIn: 'root'` 在未提供模块的情况下,模块可以作为与生成服务位置相对的模块路径提供, eg `ng g @angular-extensions/model:model examples/auth --module ../app.module.ts`(中文(简体) )
- `--project` - 生成服务的项目(对于多个项目Angular CLI工作空间,默认情况下,在没有提供项目的情况下,将在第一个项目中生成服务)
## 没有角 CLI 开始
也可使用 `@angular-extensions/model` 在不使用角 CLI 的角工程中.
1. 安装 `@angular-extensions/model` 图书馆
```
npm i -S @angular-extensions/model
```
2. 在 `src/app/examples/todo/todo.service.ts`
```ts
import { Injectable } from '@angular/core';
import { Model, ModelFactory } from '@angular-extensions/model';
import { Observable } from 'rxjs';
const initialData: Todo[] = [];
@Injectable({
providedIn: 'root'
})
export class TodoService {
private model: Model;
todos$: Observable;
constructor(private modelFactory: ModelFactory) {
this.model = this.modelFactory.create(initialData);
this.todos$ = this.model.data$;
}
addTodo(todo: Todo) {
const todos = this.model.get();
todos.push(todo);
this.model.set(todos);
}
}
export interface Todo {
prop: string;
}
```
3. 如第3点及以上所述,在您的一些组件中使用新模式服务 `Getting started in Angular CLI projects` 节
## 与较旧的角模型模式和 `ngx-model` 图书馆
这是旧图书馆的新增强版 `ngx-model` 执行《公约》的情况 [角模型模式](https://tomastrajan.github.io/angular-model-pattern-example)。 。 。 . 所有原始实例和文件仍然有效。 唯一的区别是 您可以添加 `@angular-extensions/model` 与 `ng add` 而不是安装 `ngx-model` 或必须复制模型模式 执行.
与 `ngx-model` 是那个 `@angular-extensions/model` 使用新内容 `providedIn: 'root'` 语法( 自 Angular 6 起) 这样我们不需要导入 `NgxModelModule` 或类似的注册 `ModelFactory` 输入角依赖性注射. 我们只需要进口 `ModelFactory` 在建筑者中,我们至少一个服务 像这样的应用程序 `constructor(private modelFactory: ModelFactory) {}` 我们 不错,去。 这个新功能被称为可树摇动提供者:
> 现在有一种新的、推荐的注册提供者的方法,直接在 @ Injectable() 装饰器内,使用新提供的 在属性。 它接受“ root” 作为您应用程序的一个值或任何模块 。 当您使用“ root ” 时, 您的注射器将被注册为应用程序中的单通, 您不需要添加到根模块的提供者中 。 同样,如果您使用“In: UsersModule” ,则该可输入器注册为“UsersModule”的提供者,而不添加到模块的提供者([来源](https://blog.ninja-squad.com/2018/05/04/what-is-new-angular-6/)(中文(简体) )
#### 从 `ngx-model`
移徙应该相当简单,请遵循这些步骤:
1. 删除依赖到 `ngx-model`
2. 安装 `npm i -S @angular-extensions/model`
3. 删除 `NgxModelModule` 进口商品 `@NgModule` 内 `App` 或者说 `Core` 基于您添加的模块
4. 搜索并替换从 `ngx-model` 改为: `@angular-extensions/model`
5. 这应该是它! API没有改变,所以这应该是 迁移到新的软件包
6. (可选的)重构您现有的模式服务以使用 `@Injectable({ providedIn: 'root' })` (或其他模块代替 `root`(中文(简体) ) 改为 `@Injectable()` 并把他们从 `@NgModule({ providers: [MyModelService] })` 模块
第六步要看你的喜好,还是可以使用新的 `@angular-extensions/model` 带有经典 供应商,只要使用 `--module ` 使用图表生成新模式服务时的旗帜
## 捐款
请自便 顺从 [问题](https://github.com/angular-extensions/model/issues/new?template=----bug-report.md) 或者说 [特性请求](https://github.com/angular-extensions/model/issues/new?template=--feature-request.md) 使用 GitHub 工程 [仓库](https://github.com/angular-extensions/model)。 。 。 .
## 常见问题
### @angular-extensions/model 是什么？
角模型 - 有最小化API的简单状态管理,单向数据流,多模式支持和被暴露为RxJS可观察的数据\.
### 如何安装 @angular-extensions/model？
在项目目录运行 npm install @angular-extensions/model，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@angular/core（^12\.0\.0）、@angular/cli（^12\.0\.0）、rxjs（^6\.6\.0）、typescript（~4\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @angular-extensions/model 支持 TypeScript 吗？
支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。
### @angular-extensions/model 支持 ESM 还是 CommonJS？
同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。
### @angular-extensions/model 可以商用吗？
@angular-extensions/model 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @angular-extensions/model 的下载量有多少？
根据 npm 官方下载统计，@angular-extensions/model 在 2026/10/06 – 2026/11/04 这 30 天内被下载 5,165 次，日均约 172 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @angular-extensions/model 还在维护吗？
最新版本 12\.0\.0 发布于 2021/09/21（5 年前）；至今共发布 26 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/09/28。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。