yu-lee-sin/ng-ant-admin

Angular14 中后台管理系统模板 ng-zorro ant-design-pro front-end framework

ng-ant-admin

在线文档

doc

注意，在main.ts中添加了{ ngZoneEventCoalescing: true, ngZoneRunCoalescing: true }，用于提升性能，如果你把握不住，请删除这两个属性

项目介绍

Ng-Ant-Admin 3.0发布(添加服务端真实接口)
自费服务器，在线示例网速比较慢，抱歉
如果本项目对您有用，麻烦帮我点个star，谢谢啊
if help you, if you want ,please give me a star ,thank you
账号admin，密码123456 ,数据库每10分钟从备份恢复一次
默认登录超时时间为1h，上传，下载，websocket，系统管理模块均为真实接口调用展示。
完成最常用的权限控制，人员账号管理，角色管理，菜单管理，登录超时等。添加了大量业务示例，开箱即用。
使用本项目遇到问题，可以加入376065816 qq群号与我沟通。

快速二开使用详解 快速二开使用详解
项目搭建简易教程 项目搭建简易教程
online demo地址 demo
纯净版项目地址 pure
pure project address pure
服务端源码地址 serviceApi
serviceApi address serviceApi
线上swagger地址 swagger

路由的key

key需要设置成路由地址最后一个'/'后的字符串，并且要唯一

const routes: Routes = [
  {path: '', data: {key: 'login', shouldDetach: 'no'}, component: LoginFormComponent}
];

栅格系统监听

enum EquipmentWidth {
  xs,  // (max-width: 575.98px)
  sm,  // (min-width: 576px) and (max-width: 767.98px)
  md,  // (min-width: 768px) and (max-width: 991.98px)
  lg,  // (min-width: 992px) and (max-width: 1199.98px)
  xl,  // (min-width: 1200px) and (max-width: 1599.98px)
  xxl  // (min-width: 1600px)
}

使用方式

  constructor(private windowsWidthService: WindowsWidthService) {
  }
  
  this.windowsWidthService.getWindowWidthStore().pipe(takeUntil(this.destory$)).subscribe(res => {
    this.currentEquipmentWidth = res;
    this.cdr.markForCheck();
  })

模块不需要预加载

export const routes: Routes = [
  {
    path: 'contact',
    loadChildren: import(() => './contact/contact.module').then(m => m.ContactModule),
    data: {
      preload: false
    }
  }
];

模块不需要保存状态

const routes: Routes = [
  {path: '', data: {key: 'login', shouldDetach: 'no'}, component: LoginFormComponent}
];

模块中打开新tab页来展示详情，必须设置参数如下

在data中设置newTab

const routes: Routes = [
  {path: '', component: TabsComponent, data: {title: '标签页操作', key: 'tabs'}},
  {path: 'example-detail', component: DetailComponent, data: {newTab:'true', title: '演示详情', key: 'example-detail'}}
];

缓存页面中指定容器的滚动条

在data中设置scrollContain 为元素选择器

  {path: '', component: KeepScrollPageComponent, data: {title: '缓存滚动条', key: 'keep-scroll-page',scrollContain:['#div-scroll1','#div-scroll2']}}

切换tab调用的临时声明周期如下

_onReuseInit: () => void;
_onReuseDestroy: () => void;

直接在目标组件中写出方法名为_onReuseInit或者_onReuseDestroy的方法即可实现

系统截图

捐赠

如果本项目对您有用，正巧您如果也想请我喝一杯咖啡，请扫下面的码，哈哈
If this project is useful to you, and you happen to want to invite me for a cup of coffee, please scan Alipay or WeChat

License

MIT