NG-ZORRO组件库是Angular框架的一套的企业级的UI组件库，功能也是相当的强大，应用非常广泛，简单的搭建项目使用下这个组件库

• 创建angular项目：

ng new opinion-system

创建完后，执行yarn start看项目是否成功跑起来，接着引入ng-zorro组件库

• 引入NG-ZORRO框架：

ng add ng-zorro-antd

配置信息.png

• 导入组件检测是否引入成功：

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NZ_I18N } from 'ng-zorro-antd/i18n';
import { zh_CN } from 'ng-zorro-antd/i18n';
import { registerLocaleData } from '@angular/common';
import zh from '@angular/common/locales/zh';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IconsProviderModule } from './icons-provider.module';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { CommonModule } from '@angular/common';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzButtonModule } from 'ng-zorro-antd/button';

registerLocaleData(zh);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    CommonModule,
    HttpClientModule,
    BrowserAnimationsModule,
    IconsProviderModule,
    NzLayoutModule,
    NzMenuModule,
    NzButtonModule
  ],
  providers: [{ provide: NZ_I18N, useValue: zh_CN }],
  bootstrap: [AppComponent]
})
export class AppModule { }

home.component.html:

<button nz-button nzType="primary">Primary</button>

如果组件库引入是成功的，那么开始创建模块以及组件了

• 创建模块以及组件：

// 创建模块
ng g module module/login --routing

// 创建组件
ng g component module/login

ng g module module/default --routing

ng g component module/default

ng g component module/default/home

ng g component module/default/report

ng g component module/default/keywarn

• app-routing.module.ts路由模块中添加路由：
  这个文件中需要按需加载导入大的模块进去

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { 
    path: 'login', 
    loadChildren: () => import('./module/login/login.module').then(m => m.LoginModule) 
  },
  { 
    path: 'default', 
    loadChildren: () => import('./module/default/default.module').then(m => m.DefaultModule) 
  },
  {
    path: '**',
    redirectTo: '/login'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• default-routing.module.ts菜单的路由添加：
  需要将该模块下的所有子组件添加到Routes中去，让其输入不同的路径时，切换至不同的组件。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { DefaultComponent } from './default.component';
import { HomeComponent } from './home/home.component';
import { ReportComponent } from './report/report.component';
import { KeywarnComponent } from './keywarn/keywarn.component';

const routes: Routes = [
  {
    path:'',
    component:DefaultComponent,
    children:[
      {
        path:'home',
        component:HomeComponent
      },
      {
        path:'report',
        component:ReportComponent
      },
      {
        path: 'keywarn',
        component:KeywarnComponent
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DefaultRoutingModule { }

login模块同理操作即可，只是login只需要将path设为''

const routes: Routes = [
  {
    path:'',
    component:LoginComponent
  }
];

• app.component.html导航菜单：
  主要需要将对应的路径匹配到对应的路由中去

<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a href="https://ng.ant.design/" target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>简易项目系统</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="默认菜单" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/default/home">主页</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/default/report">报告</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/default/keywarn">要点警示</a>
          </li>
        </ul>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <div class="app-header">
        <span class="header-trigger" (click)="isCollapsed = !isCollapsed">
            <i class="trigger"
               nz-icon
               [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'"
            ></i>
        </span>
      </div>
    </nz-header>
    <nz-content>
      <div class="inner-content">
        <router-outlet></router-outlet>
      </div>
    </nz-content>
  </nz-layout>
</nz-layout>

• default嵌套路由的处理：
  最后，由于default是嵌套路由，因此需要在default.component.html中添加<router-outlet></router-outlet>，类似vue中的router-view视图占位一样的作用。

image.png