angular整合ng-zorro、左边导航栏

最近学习了angular的基本使用，接下来学习阿里的组件库，ng-zorro

首先，在新建好的angular工程中引入ng-zorro

在cmd或或控制台 ng add ng-zorro-antd

然后启动工程 ng serve --open

页面如下，这里是我修改的

 

 

 我们需要在app.component.ts中加入数组menuList，模拟后台传递给菜单栏的数据

export class AppComponent {
  public menuList =[
    {
    title:'首页',
    icon:'Dashboard',
    secMenu:[{
      routerLink:'/welcome',
      menuName:'欢迎'
     },{
      routerLink:'/menus',
      menuName:'菜单'
     }]
    },{
      title:'用户管理',
      icon:'form',
      secMenu:[{
        routerLink:'/menus2',
        menuName:'用户信息'
      },{
        routerLink:'/menus3',
        menuName:'用户安全'
      }]
     },{
       title:'系统设置',
       icon:'form',
       secMenu:[{
         routerLink:'menus4',
         menuName:'系统信息'
       },{
         routerLink:'/menus5',
         menuName:'系统安全'
       }]
     }
]
  isCollapsed = false;
}

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

修改如下

<ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed" *ngFor="let menu of menuList">
      <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>
    </ul>