ngx-Zorro

ngx-zorro 是一个angular的组件库，基于ng-zorro-antd开发的一些常用组件

依赖

"@angular/cdk": "^12.2.13",
"ng-zorro-antd": "^12.1.1"

安装

npm i ngx-zorro --save

组件库

loading 组件 💘

如何使用

import { NgxLoadingModule } from 'ngx-zorro/loading';

代码示例

<ngx-loading [(visible)]="visible"></ngx-loading>

服务的方式调用

constructor(private loading: NgxLoadingService) {}
const loading = this.loading.open();
loading.close();

参数说明

| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------------- | ------- | ------- | | [visible] | 是否显示(支持双向绑定) | boolean | false | | [tip] | 提示内容 | string | 加载中… | | [inline] | 是否行内模式 | boolean | false |

弹框组件 💘

如何使用

在 style.scss中引入

// 导入 cdk overlay 的样式
@import '@angular/cdk/overlay-prebuilt.css';
// 导入 ngx-zorro 的样式
@import 'ngx-zorro/ngx-zorro.scss';

在需要的模块中导入

import { NgxDialogModule } from 'ngx-zorro/dialog';

代码示例

<ngx-dialog title="弹框标题" [(visible)]="visible">
    <div *ngxDialogContent>弹框内容</div>
</ngx-dialog>

参数说明

| 参数 | 说明 | 类型 | 默认值 | | ------------------ | ---------------------------------- | ------------------------------------------ | ------ | | [(visible)] | 是否显示 | boolean | false | | [title] | 弹框标题 | string | TemplateRef<any> | undefined | - | | *ngxDialogContent | 弹框内容模板 | TemplateRef | - | | [full] | 是否全屏 | boolean | false | | [fullButton] | 是否显示全屏按钮 | boolean | true | | [mask] | 是否展示遮罩 | boolean | false | | [dragBoundary] | 是否启用拖动边界【可视区域内拖动】 | boolean | true | | [keyboard] | 是否支持键盘 esc 关闭 | boolean | true | | [move] | 是否启用拖拽 | boolean | true | | [resize] | 是否允许拖拽弹层右下角拉伸尺寸 | boolean | true | | [width] | 宽度 | string | number | 960 | | [height] | 高度 | string | number | 580 | | [minWidth] | 最小宽度 | number | 400 | | [minHeight] | 最小高度 | number | 200 | | [top] | 窗口距离顶部距离 | string | - | | [left] | 窗口距离左边距离 | string | - | | [right] | 窗口距离右边距离 | string | - | | [bottom] | 窗口距离底部距离 | string | - |

动态构造表单组件 💘

具有的能力

可以自定义表单类型，支持自定义脚本验证和联合判断，自定义特定模板扩展属性，

默认支持类型： input，其它类型请自行实现

如何使用

import { NgxDynamicFormModule } from 'ngx-zorro/dynamic-form';
NgxDynamicFormModule.forRoot(); // 配置共享：用于全局自定义表单类型
NgxDynamicFormModule.forChild(); // 配置独立：一般用于子模块自定义表单类型

代码说明

<ngx-dynamic-form #formEditor [fields]="fields" [data]="data" layout="vertical"></ngx-dynamic-form>

// 获取表单的值
const data = this.formEditor.getRawValue(true);

自定义表单类型

interface RadioProps {
    options?: { label: string; value: any }[];
}

@Component({
    selector: 'app-radio',
    template: `
        <nz-radio-group [formControl]="formControl">
            <ng-container *ngFor="let item of options">
                <label nz-radio [nzValue]="item.value">{{ item.label }}</label>
            </ng-container>
        </nz-radio-group>
    `,
})
export class RadioComponent extends FormControlType<FormFieldConfig<RadioProps>> implements OnInit {
    ngOnInit(): void {}

    get options() {
        return this.props?.options ?? [];
    }
}

// app.module.ts
NgxDynamicFormModule.forRoot({
    types: [{ type: 'radio', component: RadioComponent }],
});

// app.component.ts
fields = [
    {
        type: 'radio',
        key: 'sex',
        props: {
            options: [
                { label: '男', value: '1' },
                { label: '女', value: '2' },
            ],
        },
    },
];

自定义脚本验证和联合判断

fields = [
    {
        type: 'input',
        label: '姓名',
        key: 'name',
        triggerScript: (control: AbstractControl, fields: FormFieldConfig[]) => {
            // 姓名有值曾用名字段才会显示，否则隐藏
            const name2 = fields.find(f => f.key === 'name2');
            if (name2) {
                name2.hidden = !control.value;
            }
        },
        // 支持传递字符串，默认参数：control: AbstractControl, fields: FormFieldConfig[]
        // triggerScript: `fields.find(f => f.key === 'age').disabled = !control.value;`,
    },
    {
        type: 'input',
        label: '曾用名',
        key: 'name2',
    },
    {
        type: 'input',
        label: '身份证号',
        key: 'idCard',
        verifyScript: (control: AbstractControl, fields: FormFieldConfig[]) => {
            // 身份证验证18位
            if (control.value && control.value.length !== 18) {
                return { error: true, message: '身份证号必须是18位' };
            }
            return {};
        },
    },
    {
        type: 'input',
        label: '出生日期',
        key: 'birth',
        triggerScript: (control: AbstractControl, fields: FormFieldConfig[]) => {
            if (control.value) {
                // 通过出生日期计算年龄
                const birthDateObject = new Date(control.value);
                const currentDate = new Date();
                const ageNum = currentDate.getFullYear() - birthDateObject.getFullYear();
                control.parent?.get('age')?.patchValue(ageNum);
            }
        },
    },
    {
        type: 'input',
        label: '年龄',
        key: 'age',
    },
];

自定义特定模板扩展属性

// 支持扩展属性继承，可以在自定义组件里面使用
interface RadioProps {
    options?: { label: string; value: any }[];
}
export class RadioComponent extends FormControlType<FormFieldConfig<RadioProps>> implements OnInit {
    ngOnInit(): void {}

    get options() {
        return this.props?.options ?? [];
    }
}

参数说明

| 参数 | 说明 | 类型 | 默认值 | | ---------- | -------- | -------------------------------------- | ---------- | | [fields] | 字段列表 | FormFieldConfigs | - | | [disabled] | 是否只读 | boolean | false | | [data] | 表单数据 | Record<string,any> | - | | [layout] | 表单布局 | 'vertical' | 'horizontal' | 'inline' | 'vertical' |

指令

防抖事件指令 ✈️

如何使用

import { NgxDirectivesModule } from 'ngx-zorro/directives';

代码示例

<button nz-button nzType="primary" (click.d)="submit()">提交</button>

参数说明

| 参数 | 说明 | 类型 | 默认值 | | ---------- | ----------------- | ------- | ------ | | [delay] | 延迟时间(单位:ms) | number | 500 | | [disabled] | 是否只读 | boolean | false |

权限指令 ✈️

如何使用

import { NgxDirectivesModule } from 'ngx-zorro/directives';
import { NgxConfigService } from 'ngx-zorro/services';

@NgModule({
    imports: [NgxDirectivesModule],
    providers: [{ provide: NgxConfigService, useExisting: NgxZorroConfigService }],
})

// NgxZorroConfigService 服务
export class NgxZorroConfigService extends NgxConfigService {
    constructor() {
        super();
    }

    hasAuth = (tag: Array<string>) => {
        return of({ $implicit: {}, status: false });
    };
}

代码示例

<ng-container *auth="condition; then authTemplate; else noAuthTemplate"></ng-container>
<ng-template #authTemplate let-authList>有权限</ng-template>
<ng-template #noAuthTemplate>无权限</ng-template>

参数说明

| 参数 | 说明 | 类型 | 默认值 | | ------ | ---------- | ------------------ | ------ | | *auth | 权限标识符 | string | string[] | - |

拦截器

HTTP 请求缓存拦截器 📍

如何使用

只支持get请求

import { NgxCacheInterceptorProvide } from 'ngx-zorro/interceptors';
providers: [NgxCacheInterceptorProvide],

// 推荐方式
this.http.get(...CacheTemplate`api/response.json`).subscribe();

// 其它方式
const headers = new HttpHeaders({ 'Cache-Map': 'Storage' });
this.http.get(url, { headers }).subscribe();

具有的能力

把一些结果稳定不变的请求缓存起来了，缓解请求压力

清理已缓存的请求

constructor(private cache: NgxCacheService) {}
this.cache.clear();
this.cache.delete();

工具

缓存属性装饰器 🚩

如何使用

// app.module.ts 中设置前缀
import { setStorePrefix } from 'ngx-zorro/utils';
setStorePrefix('ngx-zorro');

import { Store } from 'ngx-zorro/utils';

代码示例

@Store()
authList = [] // 默认值

@Store({ key: 'auth', expires: 1000 * 60 * 60 }) // 缓存的key指定为: auth; 过期时间为: 1小时
authList = [] // 默认值

参数

| 参数 | 说明 | 类型 | 默认值 | | ---------------------------------- | ------------ | ------------ | ------ | | { key?: string, expires?: number } | 缓存配置信息 | StoreOptions | - |

下载文件服务 🚩

如何使用

import { NgxDownFileService } from 'ngx-zorro/utils';
constructor(private downFile: NgxDownFileService) {}

// 必须配合 blob http 拦截器才能使用
import { NgxBlobInterceptorProvide } from 'ngx-zorro/interceptors';
providers: [NgxBlobInterceptorProvide],

代码示例

this.downFile.download('get', 'assets/background.jpg?fileName=bg.jpg').subscribe({
    next: () => {
        // 下载成功处理
    },
    error: json => {
        // 下载错误处理
    },
});

参数说明

| 参数 | 说明 | 类型 | 默认值 | | ------ | ------------------------------------------------------------------------------------------------------------------- | ------------------ | ------ | | method | 请求类型 | 'get' | 'post' | - | | url | 请求地址，url 可以传递自定义文件名；如：api/file/down?fileName=身份证.jpg，文件名则优先使用 url 参数 fileName | string | - | | params | 请求参数 | Record<string,any> | - |