NG-ZORRO組件庫(kù)是Angular框架的一套的企業(yè)級(jí)的UI組件庫(kù)帝璧，功能也是相當(dāng)?shù)膹?qiáng)大会通，應(yīng)用非常廣泛而账，簡(jiǎn)單的搭建項(xiàng)目使用下這個(gè)組件庫(kù)

• 創(chuàng)建angular項(xiàng)目：

ng new opinion-system

創(chuàng)建完后称龙，執(zhí)行yarn start看項(xiàng)目是否成功跑起來(lái)留拾，接著引入ng-zorro組件庫(kù)

• 引入NG-ZORRO框架：

ng add ng-zorro-antd

配置信息.png

• 導(dǎo)入組件檢測(cè)是否引入成功：

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>

如果組件庫(kù)引入是成功的，那么開(kāi)始創(chuàng)建模塊以及組件了

• 創(chuàng)建模塊以及組件：

// 創(chuàng)建模塊
ng g module module/login --routing

// 創(chuàng)建組件
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路由模塊中添加路由：
  這個(gè)文件中需要按需加載導(dǎo)入大的模塊進(jìn)去

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中去鲫尊，讓其輸入不同的路徑時(shí)痴柔，切換至不同的組件。

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設(shè)為''

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

• app.component.html導(dǎo)航菜單：
  主要需要將對(duì)應(yīng)的路徑匹配到對(duì)應(yīng)的路由中去

<nz-layout class="app-layout">
  <nz-sider class="menu-sidebar"
            nzCollapsible
            nzWidth="256px"
            nzBreakpoint="md"
            [(nzCollapsed)]="isCollapsed"
            [nzTrigger]="null">
    <div class="sidebar-logo">
      <a  target="_blank">
        <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
        <h1>簡(jiǎn)易項(xiàng)目系統(tǒng)</h1>
      </a>
    </div>
    <ul nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">
      <li nz-submenu nzOpen nzTitle="默認(rèn)菜單" nzIcon="dashboard">
        <ul>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/default/home">主頁(yè)</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/default/report">報(bào)告</a>
          </li>
          <li nz-menu-item nzMatchRouter>
            <a routerLink="/default/keywarn">要點(diǎn)警示</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