角模型 - @angular-extension/模型

以 @tomastrajan (英语)

简单的状态管理 最小化的 API, 一种方式的数据流, 被曝光为RxJS可观测的多模型支持和不可变数据.

• Live Demo (Stackblitz) (英语)
• 开始
• 行为守则
• 捐款
• 更改日志
• 文档 网站
• 高级使用模式 以更多方式和实例
• 博客 关于角模型模式的介绍

文档

开始于角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
   

   然后按以下例子调整组件执行

   import { Component } from '@angular/core';
   import { TodoService } from './todo.service';
   
   @Component({
     selector: 'app-todo',
     template: `
       <!-- template subscription to todos using async pipe -->
       <ng-container *ngIf="todoService.todos$ | async as todos">
         <h1>Todos ({{ todos.length }})</h1>
         <ul>
           <li *ngFor="let todo of todos">
             {{ todo.prop }}
           </li>
         </ul>
         <button (click)="addTodo()">Add todo</button>
       </ng-container>
     `,
     styleUrls: ['./todo.component.css']
   })
   export class TodoComponent {
     constructor(public todoService: TodoService) {}
   
     addTodo() {
       this.todoService.addTodo({ prop: 'New todo!' });
     }
   }
   

4. 使用我们的新 <app-todo></app-todo> 模板中的组件 app.component.html

请注意您可能使用不同的应用程序前缀 app- 因此相应调整.

型号 API

该模型有一个小型API,如上图所示.

• get(): T - 返回当前模型值
• set(data: T): void - 设定新的模型值
• data$: Observable<T> - 观察模型数据,每一次通话 set(newData) 将推动新的模式状态到这个可观测状态(数据是: 默认不可变 但它可以使用下文所述提供的其他一种工厂功能来改变)

检查已生成 todo.service.ts 以实例说明应如何使用该模型. 一般来说,该服务将实施一些方法来回收当前模型状态,进行变异并让新状态回到模型. 然后,模型将注意将不可改变的新状态副本推向使用 data$。 。 。 .

可用的模型厂商

如示例所示,模型是使用模型厂创建的 todo.service.ts,检查行 this.model = this.modelFactory.create(initialData);。 。 。 . 提供多个模范工厂,以支持不同的使用案例:

• create(initialData: T): Model<T> - 创建默认不可改变的基本模型(JSON 克隆)
• createMutable(initialData: T): Model<T> - 创建没有不可改变性保障的模型(你必须确保模型消费者不会变异和腐败的模型状态),但表现要多得多,因为整个克隆步骤被跳过
• createMutableWithSharedSubscription(initialData: T): Model<T> - 通过跳过不可改变性和所有消费者共享订阅(例如许多组件订阅单一模式),获得更大的业绩
• 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:<schematics-name> <schematics parameters>。 。 。 . 图表目前只包含一个叫做 model。 。 。 .

基本用途

ng g @angular-extensions/model:model example/todo

支持的选项

• --items - 建立收集物品的服务(将曝光) todos$: Observable<Todo[]>; 改为 todo$: Observable<Todo>(中文(简体) )
• --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

   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<Todo[]>;
   
     todos$: Observable<Todo[]>;
   
     constructor(private modelFactory: ModelFactory<Todo[]>) {
       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 执行《公约》的情况 角模型模式。 。 。 . 所有原始实例和文件仍然有效。 唯一的区别是 您可以添加 @angular-extensions/model 与 ng add 而不是安装 ngx-model 或必须复制模型模式 执行.

与 ngx-model 是那个 @angular-extensions/model 使用新内容 providedIn: 'root' 语法( 自 Angular 6 起) 这样我们不需要导入 NgxModelModule 或类似的注册 ModelFactory 输入角依赖性注射. 我们只需要进口 ModelFactory 在建筑者中,我们至少一个服务 像这样的应用程序 constructor(private modelFactory: ModelFactory<SomeType[]>) {} 我们 不错,去。 这个新功能被称为可树摇动提供者:

现在有一种新的、推荐的注册提供者的方法,直接在 @ Injectable() 装饰器内,使用新提供的 在属性。 它接受“ root” 作为您应用程序的一个值或任何模块 。 当您使用“ root ” 时, 您的注射器将被注册为应用程序中的单通, 您不需要添加到根模块的提供者中 。 同样,如果您使用“In: UsersModule” ,则该可输入器注册为“UsersModule”的提供者,而不添加到模块的提供者(来源(中文(简体) )

从 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 <relative-path-to-module> 使用图表生成新模式服务时的旗帜

捐款

请自便 顺从 问题 或者说 特性请求 使用 GitHub 工程 仓库。 。 。 .