左边是导航栏右边是相应的页面_angular整合ng-zorro、左边导航栏

上一篇已经介绍了angular了,接下来介绍ng-zorro,这个阿里推出的ant design of angular,已经做了一些基础性的工作,并且封装了一些组件,并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下:

ng add ng-zorro-antd

等待安装完成后通过命令

npm start

或者

ng serve -- open

均可以启动工程,页面如下图,这里我展示的是进行修改后的结果,这篇文章也会说明如何修改代码使得左边菜单栏符合我们的实际需求

58bc655530e4efb4f1eae007061860a1.png

通过检查代码文件不难发现app.component.html对应的就是菜单文件,为了模拟后台的数据,我们需要在app.component.ts的AppComponet类中加入menuList,代码如下:

export class AppComponent {
    

  public menuList = [{
    
    title: "loo
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值