深层剖析 ng-zorro 项目的路由设计模式

2023-09-06 09:29:57

前言

在实际的项目开发中，路由设计是至关重要的环节。合理的路由设计可以使我们的项目结构更加清晰，代码组织更加有序，并且能够提高项目的性能。本篇文章将带你深入剖析一个真实的 ng-zorro 项目，了解如何使用 ng-zorro 的路由模块进行代码组织和构建，以及如何优化路由性能，希望能够对你有所启发。

项目背景

本篇文章所剖析的项目是一个简单的后台管理系统，包含头部（logo + 用户）、侧边栏（种族/race、职业/profession、用户/user、权限/permission）、展示内容页面。该项目使用 ng-zorro 作为 UI 库，并采用了模块化的设计模式。

项目结构

该项目采用模块化的设计模式，将整个项目划分为多个模块。每个模块负责实现一个特定的功能，并具有独立的路由。

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'race', loadChildren: () => import('./race/race.module').then(m => m.RaceModule) },
  { path: 'profession', loadChildren: () => import('./profession/profession.module').then(m => m.ProfessionModule) },
  { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) },
  { path: 'permission', loadChildren: () => import('./permission/permission.module').then(m => m.PermissionModule) },
];

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

从上方的代码可以看出，我们在 app-routing.module.ts 中定义了项目的路由。其中，path 属性指定了路由的路径，loadChildren 属性则指定了该路由对应的模块。当用户访问某个路由时，Angular 就会动态地加载对应的模块。

模块设计

每个模块都具有自己的路由模块。路由模块负责定义该模块的路由，并提供必要的服务。

// src/app/race/race-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RaceListComponent } from './race-list/race-list.component';

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

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

在上面的代码中，我们定义了 RaceRoutingModule。该模块负责定义种族模块的路由。其中，path 属性指定了路由的路径，component 属性则指定了该路由对应的组件。

组件设计

每个模块的组件都负责实现该模块的功能。

// src/app/race/race-list/race-list.component.ts
import { Component, OnInit } from '@angular/core';
import { RaceService } from '../race.service';

@Component({
  selector: 'app-race-list',
  templateUrl: './race-list.component.html',
  styleUrls: ['./race-list.component.css']
})
export class RaceListComponent implements OnInit {

  races: any[];

  constructor(private raceService: RaceService) { }

  ngOnInit(): void {
    this.raceService.getAll().subscribe(races => {
      this.races = races;
    });
  }

}