You are here
宁皓网 Angular：Ant Design 有大用
在 Angular 项目里使用 Ant Design。
封面摄影：carsten bachmeyer
来自 https://ninghao.net/course/7565#info
介绍与准备
1)介绍（Ng-Zorro）
这个课程我们介始一下 Angular 版本的 Ant Design。先用 Angular 的命令行工具创建一个 Angular 项目。 然后用 ng add 命令快速配置使用 Ant Design 。
简单了解一下 Ant Design 里的布局，定制一下它的样式。然后创建一个演示模块，再了解一下怎么样快速创建 Ant Design 里的组件。最后再了解一下国际化的功能。
来自 https://ninghao.net/video/7567#info
2)Ant Design 与 Ng Zorro 的关系
Ant Design 是阿里的团队用的一套设计系统，它提供了一套设计语言，规定了一些设计原则，配色方案，各种组件的设计等等。阿里，腾讯，滴滴，美团都在使用这套设计系统。
原本 Ant Design 官方实现了一套用在 React 上的组件，它应该是 React 生态里最受欢迎的界面组件。我们现在要介绍的是在 Angular 框架上实现的 Ant Design。 阿里专门给 Angular 上的 Ant Design 起了一个名字叫 Ng-Zorro。
以后听到 Ng-Zorro 这个词，你知道它指的就是 Angular 版本的 Ant Design 就可以了。
来自 https://ninghao.net/video/7568#info
3)准备项目（Angular）
Ng-Zorro 是在 Angular 框架里用的一套组件库，所以需要先去准备一个 Angular 项目。打开终端，创建 Angular 项目可以使用它的命令行工具，确定已经提前安装好了 Node.js 以后。
# node -v
# npm -v
执行一下 npm install 安装 @angular/cli，加上 --global 选项，在全局范围安装一下这个命令行工具。
# npm install @angular/cli --global
安装完成以后，可以使用它去创建一个全新的 Angular 项目，先进入到你想保存项目的地方，比如进入到桌面上。创建 Angular 项目用的是 ng new ，后面加上项目的名字，比如 ninghao-zorro 。
# ng new ninghao-zorro ( ng new ninghao-zorro --routing --style less 这个是我使用的)
提示，Would you like to add Angular routing，需要 Angular 的路由功能吗，输入 Y ，表示需要这个功能。
又提示 Which stylesheet format would you like to use ? 在项目里要用哪种格式的样式。 Ng-Zorro 里的样式是用的是 Less，所以这里我们也可以选择使用 Less 这种格式的样式。
Angular 的命令行工具，会去给我们创建一个 Angular 项目，并且安装好了项目里依赖的东西。
进入到这个项目所在的目录 cd ninghao-zorro，
# cd ninghao-zorro
然后用编辑器打开这个项目，这里我用的是 VSCode 编辑器。
项目的 package.json 文件里定义了一些命令，启动项目的本地开发服务，可以执行这个 start 命令，或者也可以直接执行 ng serve 。
在终端，执行一下 npm run start ，
# npm run start
这里真正执行的是 ng serve 这个命令，它会给我们创建一个 Angular 项目的本地开发服务，地址是 localhost:4200。
打开浏览器，访问一下这个 localhost:4200， 现在你看到的是一个 Angular 项目的欢迎界面。
来自 https://ninghao.net/video/7569
4)源代码管理（ninghao-zorro）
下面可以给我们这个项目去创建一个远程仓库，可以在 github 这个网站上创建一个，新建一个代码仓库。
仓库的名字是 ninghao-zorro ，创建仓库。 复制一下这个添加远程仓库的命令。
https://github.com/shipingzhong/ninghao-zorro
再回到我们自己的项目，在终端，先看一下项目里的提交日志，新创建的 Angular 项目已经做了源代码管理，里面有一个初始的提交。
# git log
执行一下添加远程仓库的命令。
# git remote add origin git@github.com:shipingzhong/ninghao-zorro.git
有了这个远程以后，可以把本地分支推送到这个远程仓库。git push ，推送到 origin 这个远程，推送的本地分支是 master。
# git push origin master
完成以后，回到刚才创建的这个远程仓库，刷新一下。这里会出现刚才推送上来的项目。
再回到终端，再创建一个新的分支并且切换到这个新的分支上，分支的名字是 getting-started 。
# git checkout -b getting-started
然后把这个新的分支也推送到项目的 origin 这个远程的上面。
# git push origin getting-started
回到远程仓库页面，刷新一下。
打开 分支，这里会出现刚才推送上来的 getting-started 分支，在这个课程里我对项目的修改都会保存在这个分支上，到时候你可以找到这个项目的远程，检查一下我在 getting-started 这个分支上做的提交。(https://github.com/ninghao/ninghao-zorro)
来自 https://ninghao.net/video/7570#info
Ant Design（Ng-Zorro）
5)脚手架（ng add）
在 Angular 项目里，使用 Ant Design，也就是 Ng Zorro，最简单的方法应该是使用 ng add 命令。 在终端，项目所在目录的下面，
# pwd
# npm install ng-zorro-antd --save (好像必须要先执行左边这个命令 ,否则会报如下的错?)
(
Skipping installation: Package already installed
An unhandled exception occurred: Cannot find module '@angular-devkit/schematics/
tasks'
See "C:\Users\ADMINI~1\AppData\Local\Temp\ng-Udbc7k\angular-errors.log" for furt
her details.
)
可以执行一下 ng add ，
后面是要添加的东西，ng-zorro-antd，
# ng add ng-zorro-antd
ng 指的是 Angular，zorro 是 Ant Design 在 Agnular 上的名字。antd 表示的是 ant design 。
添加这个包的时候会问一些问题 (我这里没有看到问的问题)。是否要添加 Ant Design 里的一些图标资源，输入 y 表示确定。 又提示是否需要自定义主题文件，再输入一个 y 。
Choose your locale code ，选择本地化的代码，项目可以是多语言的，这里可以选择一种语言的代号， en_US 表示的是美国地区的英文，zh_CN 表示的是简体中文。 先选择 en_US 。
Choose template to create project，选择一个模板， blank 是空白模板，下面还有一个 sidemenu，一个带边栏的模板。 命令会根据我们的选择修改项目里的一些东西。
这个命令会给项目安装并且配置好 Ant Design，在 Angular 里面， Ant Design 叫做 ng-zorro 。
看看下面这个吧
| order | title |
|---|---|
2 | Schematics |
ng-zorro-antd support schematics, you can init configuration and generate component with schematics now.
Init Project
Init project with ng-zorro-antd.
Run ng add ng-zorro-antd in your project directory, and follow the options to configure.
You can choose a preset template to create your project, then develop on this basis code.
Command
ng add ng-zorro-antd [options]Options
--theme
ng-zorro-antd will create theme.less in src folder.
You can get more information at the Customize Theme part.
--locale
If you add --locale=[language]，ng-zorro-antd import the language package and the i18n part of angular in the app.module.ts.
The default i18n config of ng-zorro-antd is zh_CN now，you can get more information at the Internationalization part.
--animations
Enable the BrowserAnimationsModule your app module
--gestures
Install and import hammerjs for gesture support in your project
Component Generation
You can get component generation code in our doc after expand the code panel below every example.
Command
ng g ng-zorro-antd:[schematic] <name> [options]For example, you can generate an login form with the follow command.
ng g ng-zorro-antd:form-normal-login login来自 https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/docs/schematics.en-US.md 有大用
来自 https://ng.ant.design/docs/getting-started/zh 有大用
完成以后，先到浏览器上预览一下。如果发现页面没有反应，应该是开发服务遇到了问题，回到终端，可以重新运行一下项目的开发服务。
现在你看到的就是一个用了 Ant Design 的 Angular 项目。 项目用了 sidemenu 模板，我们可以基于这个模板去开发自己的项目。
这个模板有个边栏，上面有一些菜单项目。 这个边栏可以收起来，收起来菜单项目只会显示图标。鼠标放在图标上面，会显示它里面的菜单项目。
来自 https://ninghao.net/video/7572#info
6)预览 Ant Design（ Ng-Zorro）项目
回到项目，先检查一下刚才用 ng add 命令添加的 ng-zorro-antd 都做了些什么。这个命令会给项目安装一个包，
就是这个 ng-zorro-antd，这个包里提供的东西就是 Ant Design 里的一些组件还有功能。
命令还修改了一下 angular.json 这个文件，在这个文件里引入了 Ant Design 提供的一些小图标资源。
打开 src 目录，在添加 ng-zorro-antd 的时候，我选择了要自定义主题，所以命令会在这个 styles.less 样式文件里，自动给我们添加了一些 less 格式的样式，主要就是一些变量的定义。修改这些变量的值，可以改变 Ant Design 的样式。
打开应用的根模块，AppModule，在这个模块里，导入了一些 Ant Design 需要的东西。比如这个 NgZorroAntdModule，另外还导入了一些 Angular 框架本身的东西。比如这个 BrowserAnimationsModule，Ant Design 里的动画效果应该会用到这个模块。
这里还配置了一下应用的语言。
现在界面上显示的主要内容是 AppComponent 组件的模板文件里的东西，
在这个模板文件里，用到了 Ant Design 里的布局组件。
这个组件需要的一些自定义样式，放在了这个 app.component.css 文件里了。
在这个 AppRoutingModule 模块里配置了一下应用的路由，里面定义了两条路由，一条是应用的根，这是一条重定向路由，访问它会把用户重定向到 welcome 这个地址。
下面定义了这个 welcome 路由，这里用了一个异步路由，访问它的时候，会加载应用里的 welcome 这个模块。这个模块在 pages，welcome 目录的下面。
这个模块里声明了一个 Welcome 组件，组件的视图是这个 welcome.component.html 。
来自 https://ninghao.net/video/7573#toc
7)布局（nz-layout, nz-sider）
打开应用里的 AppComponent 这个组件，这个组件是应用的根组件，因为它在 AppModule 模块的 bootstrap 里面，应用启动的时候，会创建这个组件。
打开这个 AppComponent 组件的视图文件，在组件的视图里，用了 Ant Design 里提供的一些布局用的组件，比如这个 nz-layout，这个元素是布局用的容器。它里面可以嵌套其它的布局组件，比如 nz-header，nz-sider，nz-footer，nz-content 等等。
nzCollapsible
这里嵌套了一个 nz-sider，它是一个边栏组件，就是你在界面上看到的这个左边栏，组件上可能会公开一些属性，使用这些属性可以配置一下这个组件。比如这个 nzCollapsible 表示的就是这个边栏能不能收起来。
添加了这个属性，表示这个边栏可以被收起来， 下面把 nzTrigger 的值设置成了 null，意思是要自定义一下收起边栏用的东西。
如果去掉这个设置，你会发现，在边栏上会出现一个默认的可以收放边栏的东西。因为我们用的这个模板自定义了一下这个收放边栏的按钮，所以可以让 nzTrigger 的值是 null 。
nzCollapsed 表示的是边栏当前的收起状态，这里用了一个双向绑定，后面的这个 isCollapsed 是组件里的一个属性，打开这个组件，你会发现，组件里有一个 isCollapsed ，默认它的值是 false。
在边栏右边的主内容里面，有个自定义的小图标，在这个小图标周围的 span 标签上面，绑定了一个 click ，也就是点击事件，点了它做的事情就是设置组件的 isCollapsed 属性的值，让它的值等于跟之前相反的值。 也就是如果它的值现在是 true，点了小图标，这个属性的值就会变成 false，如果是 false，点了以后 isCollapsed 的值就会是 true 。
这个小图标会判断 isCollapsed 属性，根据它值使用不同的小图标。为了清楚一些，可以在 header 这个位置上，绑定输出组件里的 isCollapsed 属性。
按一下主体头部上的这个小图标，可以收起边栏。因为触发了点击事件，设置了组件里的 isCollapsed 属性的值，边栏组件上表示当前收起状态的属性双向绑定了组件里的 isCollapsed 的值，所以组件里的这个值有变化，就会影响到这个边栏的收起状态。
isCollapsed 的值是 true，这个小图标跟之前也是不一样的，注意图标里的这个小箭头。
再按一下这个小图标，这次会把 isCollapsed 设置成 false，边栏又会变成展开的状态。
调整一下窗口的尺寸，到一定宽度的时候，这个边栏也会自动折起来。这个触发边栏折起的宽度值是在 nz-sider 元素的 nzBreakpoint 设置的， md 表示中号尺寸，可以换成 sm 试一下，表示小尺寸，这些代号其实表示的是一个特定的宽度值，这个值是 Ant Design 里面自己设置的。
再到浏览器上试一下，这次触发边栏折起来的窗口会比之前小一些。
来自 https://ninghao.net/video/7574#info
8)自定义 Ant Design 样式
Ant Design 里面有些元素支持切换不同的主题，比如这个 nz-sider ，可以给它添加一个 nzTheme ，把主题设置成 light，现在这个边栏就会使用 light 这种主题，也就是亮色主题。
边栏上的这个菜单的主题也可以换成 light，修改一下 ul 上面的这个 nzTheme 的值，把 dark 换成 light，现在边栏上的菜单也是会变成明亮风格的。
菜单的上面是应用的标志，这个链接可以改一下，用一下 routerLink，地址是 / 表示应用的根。
下面这个 img 元素是应用的图像标志，可以换成一个 Ant Design 里面提供的小图标，一个小 i 标签，上面加上 nz-icon ，再加上一个 nzType，图标的名字是 align-right，Ant Design 提供了几种不同风格的小图标，用 nzTheme 设置一下，这里用一下 outline 这种风格的小图标。
原本显示应用图像标志这里现在会显示的是一个 Ant Design 里的小图标。在这个小 i 标签上添加一个 style 属性设置一下它的颜色，设置成黑色。
图标文字也可以修改一下，换成 Ninghao 。
在项目里找到这个组件的样式表，app.component.css ，找到这个 sidebar-logo，修改一下这块样式里的 background 这个属性，背景颜色换成白色。
文字的颜色需要再调整一下，在 sidebar-logo 下面的 h1 元素里面，设置一下文字的颜色，颜色可以是黑色。 下面再用 text-transform 把文字换成大写的，再用 letter-spacing 添加点字间距，大小是 3px 。
这个边栏元素上，有一个自定义的 css 类是 menu-sidebar，在样式表里可以找到这块儿样式，先去掉边栏上的这个阴影效果。
然后再找到 sidebar-logo， 在元素的底边还有右边添加一个边线样式，颜色都是 #e8e8e8 。
app-header
应用主体内容头部这块元素上面有个 app-header 类，在样式表里找到这个类，去掉这个阴影。 在它的下边，可以添加一条实线的边框，颜色是 #e8e8e8 。
打开 AppComponent 组件的模板文件，找到之前我们在主体内容头部上添加的这行代码，去掉它，再保存一下文件。再回到浏览器预览一下。
ul
这个边栏上的菜单的右边有一条边线，在模板文件里，找到这个 ul 元素，用一个 style 属性，把它的 height 设置成 100vh 。
主题样式
主体内容的下面这个背景颜色我想换一下，可以定制一下 Ant Design 的主题样式，打开项目里的 styles.less，在添加 ng-zorro-antd 的时候，我选择需要自定义主题，所以在这个文件里会出现一些 less 格式的样式。
自定义 Ant Design 的主题样式，主要就是找到对应的变量，然后把它的值换成自己想要的就行了。比如这里我需要修改的是 @layout-body-background 这个变量的值，把这个颜色值换成白色。
保存一下这个文件，会重新编译 Ant Design 的主题样式。
回到浏览器，可以再预览一下我们自定义的界面样式。
来自 https://ninghao.net/video/7575#info
9)创建演示模块与组件
先在项目里添加一个格式化代码用的配置文件，在根目录的下面，新建一个 .prettierrc ，配置一下 singleQuote ，把它设置成 true，再把 trailingComma 的值设置成 all 。
在编辑器上可以安装一下 Prettier 这个插件，
然后可以再配置一下编辑器，保存代码的时候自动格式化代码。
下面在项目里再去创建一个演示用的模块还有一个组件，在终端，项目所在目录的下面，执行 ng generate 生成一个 module，把它放在 pages 里面，名字叫 demo。后面再加上一个 --routing 选项，附带一个对应的路由模块。
# ng generate module pages/demo --routing ( # ng g m pages/demo --routing )
然后再给这个模块生成一个组件，ng generate 生成一个 component ，放在 pages 里面，名字叫 demo。
# ng generate component pages/demo ( # ng g c pages/demo )
路由
回到项目，打开 app, pages，demo 下面的 demo-routing 模块，在这个路由模块里，定义一条路由，放在 routes 里面，一个对象，路由的 path 是一个空白，路由的 component 是 DemoComponent 。
再打开 app-routing 模块，在应用的根路由模块里再定义一条路由，可以复制一份上面这个 welcome 路由，然后修改一下，路由的 path 是 demo，这是一个异步路由，导入的模块的位置是 pages，demo 下面的 demo.module，要导入的是 DemoModule 模块。 这条异步路由的作用就是访问这个 demo 地址的时候，才会加载需要的 DemoModule 模块的代码。
模板
打开 AppComponent 组件的模板文件，处理一下边栏菜单，修改一下这个 Form 项目，标题文字设置成 Demo，小图标可以使用 copy 。
它里面又嵌套了一个列表，这个列表项目的链接文字可以设置成 Basic，在这个 a 标签上用一下 routerLink 绑定的地址是 /demo 。
下面再清理一下上面的这两个菜单项目，只留下 Dashboard 还有它里面的这个 Welcome 菜单项目。
预览
回到浏览器可以预览一下，现在边栏上会出现一个 Demo 菜单，点击它里面的 Basic 访问的地址就是 demo，这样就会加载 DemoModule 模块，现在界面上主体这块显示的内容就是这个模块里的 DemoCompoennt 组件的视图。
在项目里可以找到这个模板文件，修改一下它里面的内容，再回到浏览器预览一下。你会发现界面上的内容会是我们修改之后的。
来自 https://ninghao.net/video/7576#info
10)快速使用 Ant Design 组件（登录表单）
在 Ng-Zorro 官方的文档里面，你可以找到它提供的各种组件的用法。打开 Form 这个组件的文档，在组件的文档里面都会有提供一些模板代码，可以快速创建需要的界面。
比如我需要在应用里使用这个登录界面，按一下它下面这个复制生成代码的命令，
https://ng.ant.design/components/form/zh
复制的命令是: # ng g ng-zorro-antd:form-normal-login <name>
回到项目，在终端，项目所在目录的下面，可以执行一下刚才复制的命令。
这个命令就是 ng generate ，生成的是 ng-zorro-antd 里的模板，form-normal-login 是要生成的模板，把这个 name 换成一个组件的名字。组件放在 pages/demo 里面，名字叫 login。
# ng g ng-zorro-antd:form-normal-login pages/demo/login
回到项目，找到刚才生成的组件，pages，demo，login，可以先看一下这个组件的模板文件，login.component.html ，在这个模板文件里使用了 Ant Design 里提供的组件创建了一个用户登录界面。
你会发现有些地方会有错误，这是因为在这个组件的模板里需要导入需要的东西。这个 login 组件在 DemoModule 模块里声明了一下，打开这个模块，在模块的 declarations 里面，会有 LoginComponent ，这是命令自动添加进来的。
这个组件里面还需要 AntDesign 里的一些组件，可以在 imports 里面，导入 NgZorroAntdModule 这个模块，这个模块来自 ng-zorro-antd 。
另外组件里还需要 Angular 里面的 ReactiveFormsModule 模块，也把它放在模块的 imports 里面，这个模块来自 @angular/forms 。保存一下模块文件，再回到 LoginComponent 组件的模板文件，可以再保存一下，你会发现之前的错误提示就不见了。
路由
下面给这个组件添加一条路由，打开 DemoModule 模块的路由模块，在这个模块里，添加一条路由，路由的 path 是 login，路由对应的 component 可以用一下 LoginComponent 这个组件。
模板
然后再打开 AppComponent 组件的模板文件，在边栏上的 Demo 菜单下面添加一个新的菜单项目，复制一份，文字是 Login，地址是 /demo/login。
预览
回到浏览器可以再预览一下，点击边栏菜单上的 Login ，打开的是 demo/login 。界面上显示的就是 LoginComponent 组件的视图内容，这里就是一个登录用户的表单。
现在打开这个 Login 的时候，Demo 下的这个 basic 也会是激活状态，因为当前打开的地址里在包含 demo 这个前缀，可以修改一下，在 Demo 下面的 Basic 这个菜单项目上面，把这个 nzMatchRouter 换成 nzMatchRouterExact。
现在打开 demo/login 这个页面的时候，只有 Login 这个菜单项是激活的状态。
来自 https://ninghao.net/video/7577#info
11)国际化
在终端先给项目快速创建一个 Ant Design 里的日期选择组件，执行 ng generate 生成 ng-zorro-antd，模板的名字是 date-picker-format ，放在 pages，demo 里面，组件的名字叫 date-picker。
# ng g ng-zorro-antd:date-picker-format pages/demo/date-picker
回到项目，打开 Demo 模块的路由模块，添加一条路由，路由的 path 是 date-picker，路由对应的 component 设置成 DatePickerComponent 这个组件。
然后打开 AppComponent 组件的模板文件，在边栏上菜单上添加一个新的项目，复制一份，文字是 Date Picker，地址是 /demo/date-picker 。
预览
回到浏览器预览一下，打开边栏上的 Date Picker ，界面上显示的是一个日期选择组件，用户可以使用这个组件要选择日期。
注意现在这个组件上显示的一些东西是英文的，因为应用现在用的语言就是英文。
回到项目，打开项目的 AppModule 模块，在应用的根模块里配置了一下应用的语言，现在是 en_US，可以换成 zh_CN 试一下。
在上面还得导入 Angular 里的中文语言，导入 zh，把这个 zh 交给 registerLocaleData 这个方法。
回到浏览器，再试一下这个日期选择组件，现在这个组件上显示的就会是简体中文了。
切换语言
下面我们可以在这个组件里添加一个切换语言用的按钮，回到项目，这里先把语言设置成 en_US 。
然后打开 DatePickerComponent 组件，在组件里可以注入一个依赖，添加一个构造方法，方法里面添加一个参数属性，private i18n，类型是 NzI18nService，这个服务来自 ng-zorro-antd，使用这个服务里的方法可以切换语言。
在这个组件里再添加一个方法，名字可以叫 switchLanguage，方法接收一个 language 参数，类型是 string。
方法里面用一个 swtich，检查一下 language 参数的值，如果它的值是 zh_CN，可以用一下 this.i18n 上的 setLocale 设置一下语言，设置成 zh_CN，注意这个 zh_CN 也来自 ng-zorro-antd。
再添加一种情况，如果 language 参数的值是 en_US，用一下 this.i18n 上的 setLocale，把语言设置成 en_US 。
模板
打开这个组件的模板文件，在这个模板文件里添加两个切换语言用的按钮，一组 button ，按钮文字是 中文，按钮上添加一个 nz-button，nzType 设置成 link，再给它绑定一个 click 事件，点击按钮执行组件里的 swtichLanguage 方法，参数值设置成 zh_CN 。
复制一份，修改一下按钮文字，English ，点击按钮执行 switchLanguage 方法，参数值设置成 en_US。
预览
再到浏览器上试一下，在这组按钮的周围可以用一组 div 包装一下。
现在这个日期选择器的语言是英文，按一下 中文 按钮，会把语言切换成简体中文，日期选择器组件上就会使用简体中文。
再试一下 English，它会把语言切换成英文，这样这个日期选择器就又会使用英文了。
来自 https://ninghao.net/video/7578#info