上一篇已经介绍了angular了,接下来介绍ng-zorro,这个阿里推出的ant design of angular,已经做了一些基础性的工作,并且封装了一些组件,并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下:
ng add ng-zorro-antd
等待安装完成后通过命令
npm start
或者
ng serve -- open
均可以启动工程,页面如下图,这里我展示的是进行修改后的结果,这篇文章也会说明如何修改代码使得左边菜单栏符合我们的实际需求
![58bc655530e4efb4f1eae007061860a1.png](https://i-blog.csdnimg.cn/blog_migrate/c93e01242ef1a9a073cb50726cbe982d.jpeg)
通过检查代码文件不难发现app.component.html对应的就是菜单文件,为了模拟后台的数据,我们需要在app.component.ts的AppComponet类中加入menuList,代码如下:
export class AppComponent {
public menuList = [{
title: "loo