{"id":18471570,"url":"https://github.com/m310851010/nzx-antd","last_synced_at":"2025-04-08T11:32:15.377Z","repository":{"id":58447833,"uuid":"522253010","full_name":"m310851010/nzx-antd","owner":"m310851010","description":"基于`ng-zorro-antd`扩展组件库","archived":false,"fork":false,"pushed_at":"2025-01-08T13:23:13.000Z","size":1430,"stargazers_count":14,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"17.x","last_synced_at":"2025-03-19T13:39:52.589Z","etag":null,"topics":["angular","ng-zorro-antd"],"latest_commit_sha":null,"homepage":"https://m310851010.github.io/nzx-antd","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/m310851010.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-07T15:39:38.000Z","updated_at":"2025-01-08T13:23:16.000Z","dependencies_parsed_at":"2023-11-11T17:27:30.631Z","dependency_job_id":"f8a63c18-4d1c-4916-8eaa-4f4ee3cfe790","html_url":"https://github.com/m310851010/nzx-antd","commit_stats":{"total_commits":53,"total_committers":1,"mean_commits":53.0,"dds":0.0,"last_synced_commit":"a19388ecfcd7aa90c0c9fcf319e4c6a9060ad749"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fnzx-antd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fnzx-antd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fnzx-antd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/m310851010%2Fnzx-antd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/m310851010","download_url":"https://codeload.github.com/m310851010/nzx-antd/tar.gz/refs/heads/17.x","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247834020,"owners_count":21003900,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","ng-zorro-antd"],"created_at":"2024-11-06T10:17:19.872Z","updated_at":"2025-04-08T11:32:13.759Z","avatar_url":"https://github.com/m310851010.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# NzxAntd\n\n`NzxAntd`是一个`angular`组件库，基于`ng-zorro-antd`进行二次扩展，并加入开发常用功能。全部代码开源并遵循 `MIT` 协议，任何企业、组织及个人均可免费使用。\n\n[![npm version](https://img.shields.io/npm/v/@xmagic/nzx-antd/latest.svg)](https://npmjs.com/package/@xmagic/nzx-antd)\n![License](https://img.shields.io/badge/License-MIT-blue.svg)\n[![Angular](https://img.shields.io/badge/Build%20with-Angular%20CLI-red?logo=angular)](https://www.github.com/angular/angular)\n[![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@main/badge/badge-storybook.svg)](https://m310851010.github.io/nzx-antd)\n\n## ✨特性\n\n- 扩展`HttpInterceptor`拦截器，简化通用业务处理\n- 封装常用组件 使之支持`FormControl`和`NgModal`\n- 封装表格组件, 简单易用, 功能强大\n- 常用工具类， 服务， 指令，管道\n- 集中化配置，统一配置入口\n\n## 文档和示例\n\n有关文档与示例，请访问 [https://m310851010.github.io/nzx-antd](https://m310851010.github.io/nzx-antd)\n\n\n## 🖥使用环境\n\n- [Angular](https://angular.io) \u003e= v16.0.0\n- [ng-zorro-antd](https://ng.ant.design) \u003e= v16.0.0\n\n## 📦安装\n\n```shell\nnpm i @xmagic/nzx-antd --save\n```\n\n## 🔨使用\n\n\n## 🍏引入样式\n\n\u003e 有两种方式引入样式, 在 `angular.json` 中 或者 `style.less`中, 任选其一\n\n- 在 `angular.json` 中引入\n\n```json\n{\n  \"styles\": [\n    \"node_modules/@xmagic/nzx-antd/nzx-antd.less\"\n  ]\n}\n```\n\n- 在 `style.less` 中引入 `less` 样式文件\n\n```css\n@import \"node_modules/@xmagic/nzx-antd/nzx-antd.less\";\n```\n\n## 🍎引入模块\n\n1. 配置`NzxAntdService`\n\n```ts\n// nzx-antd-config.service.ts\n\nimport { Injectable } from '@angular/core';\nimport { NzxAntdService } from '@xmagic/nzx-antd';\nimport { environment } from '../environments/environment';\n\n@Injectable({\n  providedIn: 'root'\n})\nexport class NzxAntdConfigService extends NzxAntdService {\n  override basePath = environment.basePath;\n  override response = { data: 'data' };\n  constructor() {\n    super();\n  }\n}\n\n```\n\n2. 修改`AppModule`\n\n```diff\n// app.module.ts\n\nimport { NgModule } from '@angular/core';\nimport { AppComponent } from './app.component';\nimport { NzxModalModule } from '@xmagic/nzx-antd/modal';\nimport { NzxHttpInterceptorModule } from '@xmagic/nzx-antd/http-interceptor';\n+import { NzxAntdService } from '@xmagic/nzx-antd';\n+import { NzxAntdConfigService } from './nzx-antd-config.service';\n\n@NgModule({\n  imports: [\n    NzxModalModule,\n    NzxHttpInterceptorModule\n  ],\n  providers: [\n+   { provide: NzxAntdService, useExisting: NzxAntdConfigService }\n  ],\n  bootstrap: [AppComponent]\n})\nexport class AppComponent {}\n```\n\n3. 修改`AppComponent`\n\n```ts\n//app.component.ts\n\nimport { Component, OnInit } from '@angular/core';\nimport { HttpLoadingService, LogoutService } from '@xmagic/nzx-antd/http-interceptor';\nimport { NzMessageService } from 'ng-zorro-antd/message';\nimport { NzxModalWrapService } from '@xmagic/nzx-antd/modal';\nimport { loadingService } from '@xmagic/nzx-antd/service';\n\n@Component({\n  selector: 'app-root',\n  template: '\u003crouter-outlet\u003e\u003c/router-outlet\u003e',\n})\nexport class AppComponent implements OnInit {\n  constructor(\n    protected loading: HttpLoadingService,\n    protected notifyService: LogoutService,\n    protected modalService: NzxModalWrapService,\n    protected message: NzMessageService,\n  ) {}\n\n  ngOnInit(): void {\n    this.loading.subscribe(status =\u003e loadingService.loading(status));\n\n    this.notifyService.onLogout(error =\u003e {\n      this.modalService.closeAll();\n      if (error.timeout) {\n        this.message.info(error.message || '登录超时，请重新登录');\n      }\n      window.top!.location.href = error?.url || '#/login';\n    });\n  }\n}\n```\n\n## 🏴授权协议\n\n[MIT](https://raw.githubusercontent.com/m310851010/nzx-antd/main/LICENSE)\n\n## 👍支持\n\n为该项目点个免费的星⭐\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm310851010%2Fnzx-antd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fm310851010%2Fnzx-antd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fm310851010%2Fnzx-antd/lists"}