Movitech.ng-components NPM

Movitech Components

基于 NG-ZORRO 的一套 UI 组件，适用于 Angular 项目。

Tips

运行 demo 项目

$ npm i
$ npm run start:with-pkg

开发过程

组件(./projects/movitech/ng-components/src)源码发生修改，无法立即生效，需重新构建

$ npm run pkg:build

demo 组件(./src)源码发生修改可立即生效

添加组件

Story: 添加新组件 new-component

添加组件模块

$ cd projects/movitech/ng-components
$ ng generate module src/lib/new-component
$ ng generate component src/lib/new-component

重命名模块名称，添加前缀
modify src/lib/new-component/new-component.module
```
NewComponentModule > MtNewComponentModule
```
modify src/lib/new-component/new-component.component
```
NewComponentComponent > MtNewComponentComponent
```

导入根模块

import { MtNewComponentModule } from './new-component/new-component.module'; <- 导入模块

@NgModule({
  imports: [NgZorroAntdModule],
  exports: [
    ...
    MtNewComponentModule  <- 导出模块
  ]
})
export class MtComponentsModule {}

添加索引文件及需要导出的 class/interface 等
add src/lib/new-component/interface.ts
```
export interface MtSomeModel {}
```
add src/lib/new-component/public_api.ts
```
export * from './interface';
```
add src/lib/new-component/index.ts
```
export * from './public_api';
```
导出组件中的依赖项
modify src/public_api.ts，add a line
```
export * from './lib/new-component';
```

添加组件 Demo

组件完成，回到根目录添加 demo 组件

在 src/demos 文件夹下添加相应的 demo 文件，例如

.
└── demos
    └── tree
        ├── basic.md // tree 组件的基础用法描述
        ├── basic.ts // tree 组件的基础用法 demo 代码
        └── index.md // tree 组件的综合描述

demo 组件分组排序

编辑 src/demos-order.json 即可进行分组和排序

完成