ng-zorro-antd 入门初体验

2024-11-27 00:25:42

Angular版本的 Ant Design 总算发布了，其名曰：ng-zorro-antd。

这人要是越期待，心就越着急。早在8月上旬我就开发好了 ng-zorro-vscode；一个在vscode下的snippets。因此，虽然那时未能探到源代码，但从官网的SDK中，就已经对 ng-zorro-antd 有一定全面性了解。

下面将基于我的理解，从宏观角度解析一下，或许能帮助你更好的去使用 ng-zorro-antd。

再次说一下，ng-zorro-antd 真的是非常有良心的作品。

一、安装

ng-zorro-antd 本身只是一个antd组件Angular实现的合集，因此，如果你希望基于 ng-zorro-antd 开发依然需要先安装 Angular Cli。

1、创建项目

# 安装全局，这样允许直接在CMD命令行中使用 `ng` 命令。
npm install -g @angular/cli@latest

# 创建项目
ng new demo

# 安装包
npm install --save ng-zorro-antd

2、导入模块

我建议在 SharedModuel 中导入模块。

@NgModule({
  imports: [
    NgZorroAntdModule.forRoot()
  ],
  exports: [
    NgZorroAntdModule
  ]
});

3、根组件

务必要引入 nz-root 根组件；有且只需引用一次。部分组件需要依赖 nz-root 所以最佳位置放在根组件内，比如 ./src/app.component.html：

<nz-root>
  <router-outlet></router-outlet>
</nz-root>

至此，你可以放心在任何页面中使用 ng-zorro-antd 组件。

二、最佳实践

已经实现了绝大多数的 React 版本的组件；虽然今天刚发布，但是已经在阿里内部已经在使用了。

1、命名

ng-zorro-antd 在命名方面还是很讲究的，而且有几个特点：

所有组件、指令都是以 nz- 开头（例：ng-button）。
所有组件、指令属性都是 nz 开头，紧跟大驼峰式命名法（例：[nzSize]）。

2、栅格

antd 是以 24 等分的栅格来划分区域，这一点可能跟经常使用 bootstrap 的人会有一点不习惯。

<div nz-row>
  <div nz-col [nzSpan]="12"></div>
  <div nz-col [nzSpan]="12"></div>
</div>

一个 nz-row 内的 nz-col 总格数（[nzSpan] 总和）为24表示一行，如果超过会自动换行。

当然，也支持类似 bootstrap 的响应式设计，内置了几种不同的响应。

Size	ng-zorro-antd	bootstrap
auto	[nzXs]	.col-xs-
540px	[nzSm]	.col-sm-
720px	[nzMd]	.col-md-
960px	[nzLg]	.col-lg-
1140px	[nzXl]	.col-xl-

如果你喜欢 flex 布局，需要手动开启：

<div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'top'">
  <div nz-col [nzSpan]="12"></div>
  <div nz-col [nzSpan]="12"></div>
</div>

3、样式

无须再额外的引用外部任何 antd 的样式，因为 ng-zorro-antd 是以 encapsulation: ViewEncapsulation.None 不隔离的方式封装样式，可以直接在任何地方运用到这些样式。

比如：

<div class="ant-row">
  <div class="ant-col-12">col-12</div>
  <div class="ant-col-12">col-12</div>
</div>

4、时间处理

Angular 默认的时间处理简直就是一个痛，而 ng-zorro-antd 依赖了 moment，因此在处理时间格式上，正确的姿势应该是：

_value | nzDate: 'YYYY-MM-DD ddd'
Outpu: 2017-08-15 周二

5、货币

也是Angular痛点，ng-zorro-antd 并无提供相应Pipe，应该后续会有！

三、工欲善其事，必先利其器

如果你在 vscode 中编写Angular，那么安装 ng-zorro-vscode 代码片断，对开发效率很有帮助。

四、结论

ng-zorro-antd 对Angular应该会有一个非常大的推动。

当前组件与React组件还有几个比较重要的组件未完成，比如：autocomplate、Cascader 一些很常用的组件。希望有更多大牛加入贡献行列，让 ng-zorro-antd 社区环境更丰富。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

详解关于Angular4 ng-zorro使用过程中遇到的问题

写在前面由于现在网络上Angular 4的相关技术文档不是很充分,我写出这个采坑的记录文档,一方面是想给自己在项目中遇到的各种问题与个人的理解记录下来,另一方面也想着某些坑大家可能也会遇到,也可以给道友做一个参考.文档中的很多地方多有不足,后期我会慢慢完善,也希望道友们能够及时指出文档中不正确的与可以优化的地方. 我计划将该帮助文档分为4个章节: 章节一: 关于angular 4 + ng-zorro在基础布局与模块拆分上的一些问题与操作步骤章节二: angular 4 引入路由=> 组件模
Angular中使用ng-zorro图标库部分图标不能正常显示问题

在ng-alain中,使用ng-zorro图标库,发现部分能正常显示,部分并不能显示,在控制台同时发现出错报错. ERROR Error: [@ant-design/icons-angular]: the icon redo-o does not exist or is not registered. at IconNotFoundError (ant-design-icons-angular.js:159) at MapSubscriber.project (ant-design-icons-
浅谈ng-zorro使用心得

前言本周使用ng-zorro做了项目的原型,对它也有了一定的了解,总的来说不难,可以用强化版boostrap来理解它,由于黄庭祥初始化工作做得很好,在写的过程遇到的问题不是很麻烦,感谢祥哥. 问题一.button不起作用问题描述:button按钮按下无响应,如下图: 代码如下: 解决思路: 首先删除button中所有的样式,保留最基本的html,发现依然无响应,说明问题不在button身上排查栅格布局,发现table标签被我放在了button同一行新建了一个row,col放置table,问
MyBatis入门初体验之使用大全(2)

MyBatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .2013年11月迁移到Github. iBATIS一词来源于"internet"和"abatis"的组合,是一个基于Java的持久层框架.iBATIS提供的持久层框架包括SQL Maps和Data Access Objects(DAO) 1.所需jar包
JavaScript入门初体验书写方式

目录 javascript历史 javascript是什么? javascript的作用浏览器执行js简介 javascript的组成 ECMAScript javascript初体验行内式内嵌JS 外部JS文件结语 javascript历史布兰登艾奇( Brendan Eich ,1961年-). 神奇的大哥在1995年利用10天完成 JavaScript 设计. 网景公司最初命名为 LiveScript ,后来在与 Sun 合作之后将其改名为 JavaScript .(很大部分也是
ng-zorro-antd 入门初体验

Angular版本的 Ant Design 总算发布了,其名曰:ng-zorro-antd. 这人要是越期待,心就越着急.早在8月上旬我就开发好了 ng-zorro-vscode:一个在vscode下的snippets.因此,虽然那时未能探到源代码,但从官网的SDK中,就已经对 ng-zorro-antd 有一定全面性了解. 下面将基于我的理解,从宏观角度解析一下,或许能帮助你更好的去使用 ng-zorro-antd. 再次说一下,ng-zorro-antd 真的是非常有良心的作品. 一.安装
vue.js 初体验之Chrome 插件开发实录

背景对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用.但是有时候在开发中,仅仅只是需要某一两个动画效果,把整个CSS文件都引入,这样不是太好. 需求就出现了,能不能有一个工具可以直接预览Animate.css对应的动画效果,并且生成对应的动画代码呢? 作为一个UI开发,平时跟Chrome浏览器打交道最多,于是就整了一个Chrome插件可以及时预览对应Animate.css中的动画效果并生成对应的动画代码,这样在实际开发中
Hibernate初体验及简单错误排除代码详解

Hibernate是什么,有多少好处,想必查找这类博文的都知道,所以就不多说了.下面是我对Hibernate简单使用的一个小小的总结.与君(主要是刚入门的)共勉吧! 创建的顺序创建Hibernate的配置文件创建持久化的类创建对象-关系的映射文件通过HibernateAPI编写访问数据库的代码关于详细的步骤导入Hibernate必须的jar包(hibernate-release-版本号.Final\lib\required) 然后是导入MySQL的jdbc的驱动(mysql-conn
springcloud初体验(真香)

一.微服务简介 Ⅰ.我对微服务的理解微服务是软件开发的一种架构方式,由单一的应用小程序构成的小服务:一个软件系统由多个服务组成:在微服务中,服务是细粒度的,协议是轻量级的(部署简单.性能开销小) Ⅱ.为什么要使用微服务? 随着时代的发展,单体架构(MVC三层模型)越来越不能满足企业的要求:业务规模的不断扩大.团队开发人员的增多,使得单体架构出现了以下几个问题: (1)部署效率低(比如代码量非常多,依赖的包非常多,那么每一次编译打包.部署测试的时间就会很久) (2)团队开发成本高(如果某个模块出
NetCore1.1+Linux部署初体验

NetCore1.1+Linux部署初体验 1.环境准备 Centaos7+Win10 虚拟机 Win10安装VS2017 注意勾选下.Net Core 3.Centaos安装netcore 1.1参见https://www.microsoft.com/net/core sudo yum install libunwind libicu curl -sSL -o dotnet.tar.gz https://go.microsoft.com/fwlink/?linkid=848821 sudo m
Visual Studio for Mac版初体验

你喜爱的 IDE,现在可用于 Mac.因为在 Visual Studio for Mac 之前,已经有了 Visual Studio Code for Mac,那时候我们还以为 Visual Studio Code 就是 Visual Studio 的跨平台版本,但事实微软并不是这样想的,Visual Studio Code 相对于 Visual Studio 还是太简化了,企业级的应用开发 Visual Studio Code 还是有些力不从心,所以 Visual Studio for Mac
js原型链与继承解析（初体验）

首先定义一个对象obj,该对象的原型为obj._proto_,我们可以用ES5中的getPrototypeOf这一方法来查询obj的原型,我们通过判断obj的原型是否与Object.prototype相等来证明是否存在obj的原型,答案返回true,所以存在.然后我们定义一个函数foo(),任何一个函数都有它的prototype对象,即函数的原型,我们可以在函数的原型上添加任意属性,之后通过new一个实例化的对象可以共享其属性(下面的两个例子会详细介绍). function foo(){} fo
AJAX初体验之实战篇——打造博客无刷新搜索

如果你对AJAX不是很了解,可以先看看这篇教程的前篇<AJAX初体验之上手篇>. 现在博客很流行,相信应该上网时间稍微长点的朋友都会在这或者在那的有一个自己的博客.对于一些有一定能力的朋友,可能更喜欢自己去下载一个博客程序来架设一个自己的博客,而不是使用一些博客网站提供的服务.而大部分博客程序所带的搜索功能是提交查询关键字到搜索页面,然后在后台生成搜索结果,再呈现给用户,这过程之中浪费了一些带宽,如博客的侧边栏.要节约这一些带宽,我们可以用AJAX来打造自己的无刷新日志搜索. 在本篇教程中,数

ng-zorro-antd 入门初体验

相关推荐

随机推荐