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

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

ng add ng-zorro-antd

等待安装完成后通过命令

npm start

或者

ng serve -- open

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

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

export class AppComponent {

  public menuList = [{
    title: "loopMenu1",
    icon: "Dashboard",
    secMenu:[{
      routerLink: "/welcome",
      menuName: "welcome1"
    },{
      routerLink: "/menus",
      menuName: "menus1"
    }]
  },{
    title: "loopMenu2",
    icon: "form",
    secMenu:[{
      routerLink: "/menus2",
      menuName: "menu_2_1"
    },{
      routerLink: "/menus3",
      menuName: "menu_2_2"
    }]
  },{
    title: "loopMenu3",
    icon: "form",
    secMenu:[{
      routerLink: "/menus4",
      menuName: "menu_3_1"
    },{
      routerLink: "/menus5",
      menuName: "menu_3_2"
    }]
  }

]
  isCollapsed = false;
}

然后进入app.component.html对ul进行修改

<ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed" >
//先把这里面的代码全部屏蔽掉或者直接删除
</ul>

替换如下:

<ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed"
      *ngFor="let menu of menuList">
      <!-- 删掉nzOpen菜单栏就不会展开 -->
      <li nz-submenu nzOpen nzTitle="{{menu.title}}" nzIcon="{{menu.icon}}">
         <ul *ngFor="let secMenu of menu.secMenu">
            <li nz-menu-item nzMatchRouter>
               <a routerLink="{{secMenu.routerLink}}">{{secMenu.menuName}}</a>
            </li>
         </ul>
</li>

这样左边菜单栏就已整合完成了，是根据后台的参数进行生产的，到时候只要把menuList替换为后台获取的对象就可以了angular整合ng-zorro、左边导航栏