wenzhihong2003 / ng-ant-admin

中后台管理系统模板Angular13 ng-zorro ant-design-pro front-end framework online demo (no username and password) demo:http://124.71.128.53:8081/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

ng-ant-admin

CodeFactor

项目视频介绍

使用本项目遇到问题,可以加入376065816 qq群号与我沟通。
如果本项目对您有用,麻烦帮我点个star,谢谢啊
if help you, if you want ,please give me a star ,thank you
视频介绍地址 项目介绍
online demo地址 demo

路由的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}
];

模块中有类似详情页面需要跳转,必须设置参数如下

relatedLink数组中保存相关联的两个路由,值为每个路由地址最后的/后的字符串

const routes: Routes = [
  {path: 'set-role', component: SetRoleComponent, data: {title: '角色管理', key: 'set-role', relatedLink: ['role', 'set-role']}},
  {path: '', component: RoleManageComponent, data: {title: '角色管理', key: 'role', relatedLink: ['role', 'set-role']}},
];

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

relatedLink数组中保存相关联的两个路由,值为每个路由地址最后的/后的字符串

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

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

系统截图

ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot ScreenShot

不是捐赠

如果您将本项目用于生产,如果您愿意的话,请转1分钱给我,以此让我知道有人用于生产了,我好高兴高兴。多的我不要啊。
If you use this project for production ,if you want ,please give me 0.01¥ to tell me, Someone is using this project,let me happy.
ScreenShot ScreenShot

License

MIT

About

中后台管理系统模板Angular13 ng-zorro ant-design-pro front-end framework online demo (no username and password) demo:http://124.71.128.53:8081/

License:MIT License


Languages

Language:TypeScript 65.8%Language:HTML 28.6%Language:Less 5.4%Language:JavaScript 0.2%