ant design 预览图片_预览 Ant Design（ Ng-Zorro）项目《 Angular：Ant Design 》

回到项目，先检查一下刚才用 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 。