You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

ngx-zorro

Package Overview
Dependencies
5
Maintainers
1
Versions
54
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-zorro

[![npm version](https://img.shields.io/npm/v/ngx-zorro/latest.svg)](https://www.npmjs.com/package/ngx-zorro)


Version published
Weekly downloads
657
decreased by-35.21%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

ngx-Zorro

npm version

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]是否显示(支持双向绑定)booleanfalse
[tip]提示内容string加载中…
[inline]是否行内模式booleanfalse

弹框组件 💘

如何使用

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)]是否显示booleanfalse
[title]弹框标题string | TemplateRef<any> | undefined-
*ngxDialogContent弹框内容模板TemplateRef-
[full]是否全屏booleanfalse
[fullButton]是否显示全屏按钮booleantrue
[mask]是否展示遮罩booleanfalse
[dragBoundary]是否启用拖动边界【可视区域内拖动】booleantrue
[keyboard]是否支持键盘 esc 关闭booleantrue
[move]是否启用拖拽booleantrue
[resize]是否允许拖拽弹层右下角拉伸尺寸booleantrue
[width]宽度string | number960
[height]高度string | number580
[minWidth]最小宽度number400
[minHeight]最小高度number200
[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]是否只读booleanfalse
[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)number500
[disabled]是否只读booleanfalse

权限指令 ✈️

如何使用
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>-

FAQs

Package last updated on 09 May 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc