@xmagic/nzx-antd

NzxAntd

NzxAntd是一个angular组件库，基于ng-zorro-antd进行二次扩展，并加入开发常用功能。全部代码开源并遵循 MIT 协议，任何企业、组织及个人均可免费使用。

✨ 特性

• 扩展HttpInterceptor拦截器，简化通用业务处理
• 封装常用组件 使之支持FormControl和NgModal
• 封装表格组件, 简单易用, 功能强大
• 常用工具类， 服务， 指令，管道
• 集中化配置，统一配置入口

文档和示例

有关文档与示例，请访问 https://m310851010.github.io/nzx-antd

🖥 使用环境

• Angular >= v16.0.0
• ng-zorro-antd >= v16.0.0

📦 安装

npm i @xmagic/nzx-antd --save

🔨 使用

🍏 引入样式

有两种方式引入样式, 在 angular.json 中 或者 style.less中, 任选其一

• 在 angular.json 中引入

{
  "styles": ["node_modules/@xmagic/nzx-antd/nzx-antd.less"]
}

• 在 style.less 中引入 less 样式文件

@import 'node_modules/@xmagic/nzx-antd/nzx-antd.less';

🍎 引入模块

1. 配置NzxAntdService

// nzx-antd-config.service.ts

import { Injectable } from '@angular/core';
import { NzxAntdService } from '@xmagic/nzx-antd';
import { environment } from '../environments/environment';

@Injectable({
  providedIn: 'root'
})
export class NzxAntdConfigService extends NzxAntdService {
  override basePath = environment.basePath;
  override response = { data: 'data' };
  constructor() {
    super();
  }
}

2. 修改AppModule

// app.module.ts

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NzxModalModule } from '@xmagic/nzx-antd/modal';
import { NzxHttpInterceptorModule } from '@xmagic/nzx-antd/http-interceptor';
+import { NzxAntdService } from '@xmagic/nzx-antd';
+import { NzxAntdConfigService } from './nzx-antd-config.service';

@NgModule({
  imports: [
    NzxModalModule,
    NzxHttpInterceptorModule
  ],
  providers: [
+   { provide: NzxAntdService, useExisting: NzxAntdConfigService }
  ],
  bootstrap: [AppComponent]
})
export class AppComponent {}

3. 修改AppComponent

//app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpLoadingService, LogoutService } from '@xmagic/nzx-antd/http-interceptor';
import { NzMessageService } from 'ng-zorro-antd/message';
import { NzxModalWrapService } from '@xmagic/nzx-antd/modal';
import { loadingService } from '@xmagic/nzx-antd/service';

@Component({
  selector: 'app-root',
  template: '<router-outlet></router-outlet>'
})
export class AppComponent implements OnInit {
  constructor(
    protected loading: HttpLoadingService,
    protected notifyService: LogoutService,
    protected modalService: NzxModalWrapService,
    protected message: NzMessageService
  ) {}

  ngOnInit(): void {
    this.loading.subscribe(status => loadingService.loading(status));

    this.notifyService.onLogout(error => {
      this.modalService.closeAll();
      if (error.timeout) {
        this.message.info(error.message || '登录超时，请重新登录');
      }
      window.top!.location.href = error?.url || '#/login';
    });
  }
}

🏴 授权协议

MIT

👍 支持

为该项目点个免费的星 ⭐