NG-ZORRO

NG-ZORRO 文档 组件 实验性功能 国内镜像 10.0.2 English Star 6933 Ant Design of Angular 快速上手 脚手架 国际化 服务端渲染 定制主题 全局配置项 动画开关 资源推荐 常见问题 贡献指南 更新日志 v10 升级指南 v10 升级指南 开始之前 升级步骤 本文档将帮助你从 ng-zorro-antd 9.x 版本升级到 10.x 版本，如果你是 8.x 或者更老的版本，请先参考之前的升级文档升级到 9.x。 开始之前 # 首先确保你 Node.js >= 10.13 创建新的分支，或者使用其他方式备份当前项目 删除项目下 package-lock.json 文件 升级步骤 # 1.迁移到二级入口（如果需要） # // 之前 import { NzButtonModule , NzNoAnimationModule } from 'ng-zorro-antd' ; // 之后 import { NzButtonModule } from 'ng-zorro-antd/button' ; import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation' ; 我们已经在 v8 中弃用了 NgZorroAntdModule 和一级入口，并保留了 2

问题 ：edge浏览器下，固定列的边框消失 原因 ：ng-zorro-antd表格组件使用nzLeft和nzRight指令固定的表格列，这两个指令的实现css3中的标签： position: -webkit-sticky !important; position: sticky !important; 谷歌、火狐及-webkit-内核的浏览器均支持该属性（css3），IE不支持该属性，所以在IE中，会自动降级，表格无固定列，可滑动的形式。 Edge浏览器在1703之后的版本使用了chromium内核，对css3的属性支持较好，也支持sticky属性，可以使用，可以固定表格列，但边框会消失。 解决方案 ： 目前可行的解决方案有如下几种： 不使用固定列，若产品没有明确要求使用固定列，可以放弃使用nzLeft及nzRight来固定表格。从而使各个浏览器下的展示效果一致。 针对Edge浏览器降级处理，与IE浏览器效果一致，无固定列，整体可横向滚动。 自定义实现固定列，不使用组件的固定列实现，通过使用 position: absolute; 这种方式来实现表格的固定列。 第二个方案的详细过程如下： 使用div包裹表格，当表格宽度超过div宽度时，开启滚动： .scroll-table { width: 100%; overflow-x: scroll; } 针对表格，我们可以指定宽度

import { Directive, ElementRef, Renderer2, AfterViewInit } from '@angular/core' ; @Directive({ selector: '[appDragModal]' }) export class DragModalDirective implements AfterViewInit { private canMove: boolean = false ; private modalX: number = 0 ; private modalY: number = 0 ; private mouseDownX: number = 0 ; private mouseDownY: number = 0 ; private distX: number = 0 ; private distY: number = 0 ; constructor(private elementRef: ElementRef, private render: Renderer2) { } ngAfterViewInit() { let modalElement = this .getModalElement(); let modalTitleElement = this .getModalTitleElment(); console

手动更改： 在 src 目录下建立一个单独的 theme.less 文件，在 angular.json 文件的 styles 列表加入该文件 ... " styles " : [ ... "src/theme.less" ... ] ... 在样例中通过修改 @primary-color 的数值将 ng-zorro-antd 的基础色修改为 #f5222d ，开发者可以根据实际需求自由修改。 // -------- 引入官方提供的 less 样式入口文件 ----------- @import " ../node_modules/ng-zorro-antd/ng-zorro-antd.less " ; // -------- 自定义参数覆盖 ----------- @primary-color: #f5222d; 来源： oschina 链接： https://my.oschina.net/u/4258525/blog/3221383

$ ng new PROJECT_NAME $ cd PROJECT_NAME $ ng add ng -zorro-antd 上面的命令尽量在cmd下执行， 参考教学视频：https://ninghao.net/video/7567 来源： oschina 链接： https://my.oschina.net/u/4342169/blog/3221384

3 月，跳不动了？>>> 引言 今天看到文章：https://segmentfault.com/a/1190000015944548 。专门研究一下 ngTemplateOutlet 用法！！！！ 在我遇到的情况中，有两种时候会用到ngTemplateOutlet。 1、比如弹窗组件要 自定义标题或页脚 的内容。 弹窗组件不能在自己的内容中写死标题和页面的内容， 它们可以在页面上使用组件时， 动态向指定组件内占位传入“ 一些内容 ”，组件会插入到它想要的地方！ 比如ng-zorro中，大量这样用法，https://ng.ant.design/components/card/zh#components-card-demo-simple 2、递归组件使用时，要用到ngTemplateOutlet 来切换节点上的组件。 比如要定义菜单组件，涉及到两类组件，1是叶子菜单项，2是文件夹菜单项。 下图是看 zorro的ISSUE 中的一个截图， 其写法我不知道对不对。 递归组件的标准实践待确认！！！ 下面我就这两个情况，实践讨论一下！ 一、如何组件自定义输入内容 来源： oschina 链接： https://my.oschina.net/u/1540190/blog/3198073

基于 SpringBoot + Ng-Alain 前后端分离的实现，可以作为新手入门项目，也可以作为小项目的基础框架去扩展。目前 Snails 系统框架已支持基本的后台功能，基于简单、实用设计，并且已支持 Docker 进行项目部署。 Snails 框架 ：编程入门，新手礼赞 snails-web 前端 ： Angular + Ng-Zorro + Ng-Alain snails-api 后台 ： SpringBoot + JPA + lombok + Java8 + Mysql 源码 前端 snails-web Gitee： https://gitee.com/kuzank/snails-web GitHub： https://github.com/kuzank/snails-web 后台 snails-api Gitee： https://gitee.com/kuzank/snails-api github： https://github.com/kuzank/snails-api 1、系统功能 登陆、登出 用户管理 组织管理 菜单管理，支持菜单动态配置 在线用户 登陆日志，记录系统用户的登陆登出行为 http请求，将系统的所有请求进行拦截，并记录到数据库中 系统异常，全局拦截系统的异常，并记录到数据库中 支持系统数据初始化 snails-api 后台 支持 Docker 部署

首先跟大家介绍一下ng_Alain(阿里团队出品) ng-alain技术栈基于 Typescript 、 Angular 、 g2 、 @delon 和 ng-zorro-antd ，提前了解和学习这些知识会非常有帮助。 ng-alain 脚手架是基于 Angular 和 ng-zorro-antd（Ant Design 的 Angular 版本） 基础组件库的中后台前端解决方案。脚手架包含着一套通用的功能和业务组件库，它们可以极大的减少一些基础建设开发工作。 他的文档地址https://ng-alain.com/docs/getting-started 他的demo地址https://cipchk.github.io/ng-alain/#/dashboard/v1 现在ng-Alain的最新版本是1.0，我要给大家分享的也是1.0这个版本。虽然现在1.0还有好多东西没有写进来，但是毕竟是个大版本 ，以阿里的速度 ，应该很快就会完善。 文档第一页就详细介绍了这个项目的安装方式，所以我就绕过这一块直接给大家讲解具体使用部分 这是它的目录结构 他这个项目搭建非常合理目录也很清晰，看完顶尖团队搭建的项目，确实对自己的提升很有帮助 如果你想直接基于它这套代码开发自己的项目，那你首先要把你的页面放在routes目录下面，这一点不是强制要求。 assets文件夹下的app-data

ng-alain 是一个基于 ng-zorro-antd 的企业后台脚手架，目标也非常简单，希望在Angular上面开发企业后台更简单、更快速。github地址是： cipchk/ng-alain 。 一直以来对Ant Desig的理念非常喜欢，而一直出于工作的需要能够运用的机会本不多，直到 ng-zorro-antd 的出现，终于能够在内部真正实践。而 ng-alain 虽然时间很短，但在群里很多朋友的支持下，让其尽可能有一个比较可靠的实施。据我所知包括我们公司自己在内，已经有好几个企业开始转移至该脚手架上面来。 你可以非常简单的从 github 克隆一份最新代码，然后立即进入业务开发。 git clone --depth 1 https://github.com/cipchk/ng-alain.git 结构 ng-alain 实际是一个标准的 Angular Cli 构建的项目，因此对她就像是你前女友一样，一定不会感到陌生。 在此基础上，我将公共业务组件放在 shared/components 下面，且目前已经包括图表相关有几十个组件服务于企业后台常见业务服务型组件。 我们在处理时间、货币上面频繁极高，而提供一种非常简洁的这类数据渲染极重要。例如： {{ time | date }} 期望结果应该： 2017-11-19 04:25 ；而 {{ price | currenty