@wangdevops/ngxs-schematics
v0.0.6
Published
ngxs的模板生成工具
Downloads
9
Readme
这个项目是ngxs的工具
使用方法
安装依赖
ng add @wangdevops/ngxs-schematics
这一步用来安装schematics依赖,安装到dev就可以,因为只是生成代码用的,打包时候不需要打进去
到对应目录生成文件
cd $project/src/app/store # 这里是生成文件的位置
ng g @wangdevops/ngxs-schematics:g aaa # aaa是生成的store名称
这一步也可以在WebStorm的功能执行,操作如下:
找到对应的schematics
回车后输入aaa再回车就可以生成了
执行结果
生成文件的目录结构
执行结束后会在 $project/src/app/store
目录下生成如下文件:
📒 $project/src/app/store //生成文件的位置
📁 aaa //store存储目录
📄 index.ts
📄 aaa.action.ts
📄 aaa.selector.ts
📄 aaa.state.ts
具体文件内容
index.ts
export * from './aaa.action';
export * from './aaa.state';
export * from './aaa.selector';
aaa.action.ts
export namespace AaaAction {
export class ChangeId {
static readonly type = `修改id`;
constructor(public id: number) {
}
}
}
aaa.selector.ts
import { Selector } from '@ngxs/store';
import { AaaState, AaaStateModel } from '.';
export class AaaSelector {
@Selector([AaaState])
static id({id}: AaaStateModel) {
return id;
}
}
aaa.state.ts
import { Injectable } from '@angular/core';
import { Action, State, StateContext } from '@ngxs/store';
import { AaaAction } from '.';
export interface AaaStateModel {
id: number;
}
@State<AaaStateModel>({
name: 'aaa',
defaults: {
id: 1,
},
})
@Injectable({
providedIn: 'root',
})
export class AaaState {
@Action(AaaAction.ChangeId)
changeId(ctx: StateContext<AaaStateModel>, data: AaaAction.ChangeId) {
ctx.patchState({
id: data.id,
});
}
}
源码地址
https://gitee.com/consolelog/ngxs-schematics.git