Angular 实现树形菜单（多级菜单）功能模块

前言

本文要分享的是一个多级菜单效果，也就是传说中的树形结构菜单，理论上支持无限级菜单，当然数据结构要一定的要求，但这都不是什么难事，因为我们可以把数据组装成所需要的结构。下面这个例子虽然不是很完美好，但是估计也够用了。这个多级菜单是模仿 Angular 官方的左侧菜单效果来做的，效果的相似度应该达到 99%，本文内容有点多（主要是代码），因为我想把所有的代码都贴出来，尽量不让你幻想缺失的代码。好了，下面我们就开始这个菜单功能之旅吧！

这个多级菜单实现的功能如下：

• 1、可展示多级菜单，理论上可以展无限级菜单
• 2、当前菜单高亮功能
• 3、刷新后依然会自动定位到上一次点击的菜单，即使这个是子菜单，并且父菜单会自动展开
• 4、子菜单的显示隐藏有收起、展开，同时带有淡入淡出效果

Angular 多级菜单

还是老套路，费放不多说，我们直接上码。在上码前，我们不妨先看看代码文件结构概览图：

效果图看完之后，我们再来看看效果图：毕竟这是能让你有勇气把下面的一大堆代码阅读完的动力来源：

展开【教程】菜单再点【英雄编辑器菜单】，接着再点击【核心知识】-【模块与数据绑定】-【生命周期勾子】，然后刷新页面，菜单就会自动定位到【生命周期勾子】菜单并高亮，并且【核心知识】-【模块与数据绑定】菜单会自动展开并高亮。

上面点击每个菜单时都会跳转到一个空白的详情页，但这个详情页什么都没做，只是为了保证菜单能正常跳转而已，你可以通过观察导航栏中的 URL 变化来确定菜单是否已经跳转成功。

首先把最主要的代码贴出来：

navItem.component.html

1. <div class="level-1">
2. <ng-template [ngIf]="menu.type === 'link'">
3. <div>
4. <a class="link level-1" routerLink="{{menu.url}}" routerLinkActive="selected" (click)="toggleSubMenu(menu)">{{ menu.name }}</a>
5. </div>
6. </ng-template>
7. <ng-template [ngIf]="menu.type === 'button'">
8. <div>
9. <div class="button heading" [ngClass]="{expand:menu.expand,selected:menu.isSelected}" (click)="toggleSubMenu(menu)">
10. {{menu.name}}
11. <div class="icon">
12. <svg xmlns="http://www.w3.org/2000/svg" focusable="false" viewBox="0 0 24 24">
13. <path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path>
14. </svg>
15. </div>
16. </div>
17. <ng-template [ngIf]="menu.expand">
18. <div class="heading-children" [@inOut]="out">
19. <nav-item [menu]="menu" *ngFor="let menu of menu.subMenu"></nav-item>
20. </div>
21. </ng-template>
22. </div>
23. </ng-template>
24. </div>

上面的 routerLinkActive 可以设置当前菜单高亮。[@inOut] 为绑定的动画效果，具体用法可以参考官方资料。

这个 html 中使用了 Angular 中的一个标签 <ng-template> 关于这个标签的用法可以网上搜索一下资料。

navItem.component.css

1. a {
2. text-decoration: none;
3. color: #333;
4. }
6. .link,
7. .button {
8. display: block;
9. padding: 10px 15px;
10. transition: background-color 0.2s ease-in-out 0s, color 0.3s ease-in-out 0.1s;
11. -moz-user-select: none;
12. -webkit-user-select: none;
13. -ms-user-select: none;
14. -khtml-user-select: none;
15. user-select: none;
16. }
18. .button {
19. position: relative;
20. }
22. .link:hover,
23. .button:hover {
24. color: #1976d2;
25. background-color: #eee;
26. cursor: pointer;
27. }
29. .icon {
30. position: absolute;
31. right: 0;
32. display: inline-block;
33. height: 24px;
34. width: 24px;
35. fill: currentColor;
36. transition: -webkit-transform .15s;
37. transition: transform .15s;
38. transition: transform .15s, -webkit-transform .15s;
39. transition-timing-function: ease-in-out;
40. }
42. .heading-children {
43. padding-left: 14px;
44. overflow: hidden;
45. }
47. .expand {
48. display: block;
49. }
51. .collapsed {
52. display: none;
53. }
55. .expand .icon {
56. -webkit-transform: rotate(90deg);
57. transform: rotate(90deg);
58. }
60. .selected {
61. color: #1976d2;
62. }

navItem.component.ts

1. import { Component, Input, OnInit } from '@angular/core';
2. import { ActivatedRoute, Router } from '@angular/router';
3. import { trigger, state, style, animate, transition } from '@angular/animations';
4. import { MenusService } from '../services/menus.services.component';
6. @Component({
7. selector: 'nav-item',
8. templateUrl: './navItem.component.html',
9. styleUrls: ['./navItem.component.css'],
10. animations: [
11. trigger('inOut', [
12. state('out', style({ opacity: 0, height: 0 })),
13. transition('void => *', [
14. style({ opacity: 0, height: 0 }),
15. animate(150, style({ opacity: 1, height: '*' }))
16. ]),
17. transition('* => void', [
18. style({ opacity: 1, height: '*' }),
19. animate(150, style({ opacity: 0, height: 0 }))
20. ])
21. ])
22. ]
23. })
25. export class SideItemComponent implements OnInit {
26. startExpand = []; // 保存刷新后当前要展开的菜单项
27. targetUrl = ""; // 保存目标 URL，即当前 url，通过它来定位当前菜单高亮
28. source = [];
29. sourceItem = "";
30. @Input() menu; // 接收父组件传入的值
32. constructor(
33. private _router: Router,
34. private _activatedRoute: ActivatedRoute,
35. private _MenusService: MenusService
36. ) { }
38. ngOnInit() {
39. this._MenusService.getMenu().then(data => {
40. this.source = data;
41. this.setCurrentMenu();
42. });
43. }
45. // 展开并设置当前菜单高度
46. setCurrentMenu() {
47. // console.log(this._router);
48. this.targetUrl = this._router.url; // 获取当前url
49. this.targetUrl = this.targetUrl.substr(1, this.targetUrl.length); // 处理获取的 url, 即截掉 url 前的 “ /”
50. this.setExpand(this.source);
51. }
53. setExpand(source) {
54. for (var i = 0; i < source.length; i++) {
55. this.sourceItem = JSON.stringify(source[i]); // 把菜单项转为字符串
56. if (this.sourceItem.indexOf(this.targetUrl) > -1) { // 查找当前 URL 所对应的子菜单属于哪一个祖先菜单
57. if (source[i].type === 'button') { // 一级导航为展开按钮
58. this.startExpand.push(source[i]);
59. source[i].isSelected = true;
60. source[i].expand = true; // 设置为展开
61. // 递归下一级菜单，以此类推
62. this.setExpand(source[i].subMenu);
63. }
64. break;
65. }
66. }
67. }
69. toggleSubMenu(menuItem) {
70. if (menuItem.type === 'link') {
71. // 去掉刷新后展开菜单的高亮（如果有的话）
72. if (this.startExpand.length > 0) {
73. for (var i = 0; i < this.startExpand.length; i++) {
74. delete this.startExpand[i].isSelected;
75. }
76. }
77. this.targetUrl = menuItem.url;
78. this.setExpand(this.source);
79. this.startExpand = [];
80. }
81. menuItem.expand = !menuItem.expand;
82. }
83. }

通过 Router 的 url 属性拿到当前的 url，然后在遍历菜单对象的每一项（把它转为字符串），然后查找当前的这个 url 存在哪一个菜单菜单中。

上面的代码通过递归组件的方法来实现菜单的多级显示功能。

接下来我们就在 navMenu 组件中引入这个组件：

navMenu.component.html

1. <div class="side-nav-box">
2. <nav-item [menu]="menu" *ngFor="let menu of menus"></nav-item>
3. </div>

navMenu.component.css

1. .side-nav-box {
2. width: 300px;
3. max-height: 100%;
4. overflow-y: auto;
5. overflow-x: hidden;
6. font-size: 14px;
7. }

navMenu.component.ts

1. import { Component, OnInit } from '@angular/core';
2. import { MenusService } from '../services/menus.services.component';
4. @Component({
5. selector: 'nav-menu',
6. templateUrl: './navMenu.component.html',
7. styleUrls: ['./navMenu.component.css']
8. })
9. export class NavMenuComponent implements OnInit {
10. menus = [];
12. constructor(
13. private _menusService: MenusService
14. ) { }
16. ngOnInit() {
17. this._menusService.getMenu().then(data => {
18. this.menus = data;
19. });
20. }
21. }

接下来我们在 navSide.component.ts 中引入 navMenu 组件：

navSide.component.html

1. <nav-menu></nav-menu>

navSide.component.ts

1. import { Component } from '@angular/core';
3. @Component({
4. selector: 'nav-side',
5. templateUrl: './navSide.component.html',
6. styleUrls: ['./navSide.component.css']
7. })
8. export class NavSideComponent { }

上面就是一个完整的多级菜单组件。下面我们就把这个组件引入 app.component.ts 组件中：

app.component.html

1. <nav-side></nav-side>
2. <router-outlet></router-outlet>

app.component.ts

1. import { Component } from '@angular/core';
3. @Component({
4. selector: 'app-root',
5. templateUrl: './app.component.html',
6. styleUrls: ['./app.component.css']
7. })
8. export class AppComponent {
9. title = 'app';
10. }

为了让这个例子可以运行起来，我还为它准备了一些菜单数据，和简单的路由跳转：

menus-mock.ts

1. export const MENUS = [
2. { name: '快速上手', type: "link", url: "detail/quickstart" },
3. {
4. name: '教程',
5. type: "button",
6. expand: false,
7. subMenu: [
8. { name: '简介', type: "link", url: "detail/tutorial" },
9. { name: '英雄编辑器', type: "link", url: "detail/toh-pt1" },
10. { name: '主从结构', type: "link", url: "detail/toh-pt2" },
11. { name: '多个组件', type: "link", url: "detail/toh-pt3" },
12. { name: '服务', type: "link", url: "detail/toh-pt4" },
13. { name: '路由', type: "link", url: "detail/toh-pt5" },
14. { name: 'HTTP', type: "link", url: "detail/toh-pt6" },
15. ]
16. },
17. {
18. name: '核心知识',
19. type: "button",
20. expand: false,
21. subMenu: [
22. { name: '架构', type: "link", url: "detail/architecture" },
23. {
24. name: '模板与数据绑定',
25. type: "button",
26. expand: false,
27. subMenu: [
28. { name: '显示数据', type: "link", url: "detail/displaying-data" },
29. { name: '模板语法', type: "link", url: "detail/template-syntax" },
30. { name: '生命周期钩子', type: "link", url: "detail/lifecycle-hooks" },
31. { name: '组件交互', type: "link", url: "detail/component-interaction" },
32. { name: '组件样式', type: "link", url: "detail/component-styles" },
33. { name: '动态组件', type: "link", url: "detail/dynamic-component-loader" },
34. { name: '属性型指令', type: "link", url: "detail/attribute-directives" },
35. { name: '结构型指令', type: "link", url: "detail/structural-directives" },
36. { name: '管道', type: "link", url: "detail/pipes" },
37. { name: '动画', type: "link", url: "detail/animations" },
38. ]
39. },
40. {
41. name: '表单',
42. type: "button",
43. expand: false,
44. subMenu: [
45. { name: '用户输入', type: "link", url: "detail/user-input" },
46. { name: '模板驱动表单', type: "link", url: "detail/forms" },
47. { name: '表单验证', type: "link", url: "detail/form-validation" },
48. { name: '响应式表单', type: "link", url: "detail/reactive-forms" },
49. { name: '动态表单', type: "link", url: "detail/dynamic-form" }
50. ]
51. },
52. { name: '引用启动', type: "link", url: "detail/bootstrapping" },
53. {
54. name: 'NgModules',
55. type: "button",
56. expand: false,
57. subMenu: [
58. { name: 'NgModule', type: "link", url: "detail/ngmodule" },
59. { name: 'NgModule 常见问题', type: "link", url: "detail/ngmodule-faq" }
61. ]
62. },
63. {
64. name: '依赖注入',
65. type: "button",
66. expand: false,
67. subMenu: [
68. { name: '依赖注入', type: "link", url: "detail/dependency-injection" },
69. { name: '多级注入器', type: "link", url: "detail/hierarchical-dependency-injection" },
70. { name: 'DI 实例技巧', type: "link", url: "detail/dependency-injection-in-action" }
71. ]
72. },
73. { name: 'HttpClient', type: "link", url: "detail/http" },
74. { name: '路由与导航', type: "link", url: "detail/router" },
75. { name: '测试', type: "link", url: "detail/testing" },
76. { name: '速查表', type: "link", url: "detail/cheatsheet" },
77. ]
78. },
79. {
80. name: '其它技术',
81. type: "button",
82. expand: false,
83. subMenu: [
84. { name: '国际化（i18n）', type: "link", url: "detail/i18n" },
85. { name: '语言服务', type: "link", url: "detail/language-service" },
86. { name: '安全', type: "link", url: "detail/security" },
87. {
88. name: '环境设置与部署',
89. type: "button",
90. expand: false,
91. subMenu: [
92. { name: '搭建本地开发环境', type: "link", url: "detail/setup" },
93. { name: '搭建方式剖析', type: "link", url: "detail/setup-systemjs-anatomy" },
94. { name: '浏览器支持', type: "link", url: "detail/browser-support" },
95. { name: 'npm 包', type: "link", url: "detail/npm-packages" },
96. { name: 'TypeScript 配置', type: "link", url: "detail/typescript-configuration" },
97. { name: '预 (AoT) 编译器', type: "link", url: "detail/aot-compiler" },
98. { name: '预 (AoT) 编译器', type: "link", url: "detail/metadata" },
99. { name: '部署', type: "link", url: "detail/deployment" }
100. ]
101. },
102. {
103. name: '升级',
104. type: "button",
105. expand: false,
106. subMenu: [
107. { name: '从 AngularJS 升级', type: "link", url: "detail/upgrade" },
108. { name: '升级速查表', type: "link", url: "detail/ajs-quick-reference" }
109. ]
110. },
111. { name: 'Visual Studio 2015 快速上手', type: "link", url: "detail/visual-studio-2015" },
112. { name: '风格指南', type: "link", url: "detail/styleguide" },
113. { name: '词汇表', type: "link", url: "detail/glossary" }
114. ]
115. },
116. { name: 'API 参考手册', type: "link", url: "detail/api" }
117. ];

上面数据中的 expand: false, 其实也可以不要的，因为如果对象中不存在 expand 属性，则是 false 。即默认收起所有菜单。我们在程序中可以动态给它添加。当然在实践的开发中菜单数据结构可能会更复杂，对象属性更多，但万变不离其宗。

在这里我们还可以把这个菜单对象使用平铺式的数据结构（即，不管是子菜单还是父菜单，都同放在一个数据里）来做，而不用像上面那样父菜单嵌套着子菜单

接着，通过服务来返回这些数据：

menus.services.ts

1. import { Injectable } from '@angular/core';
2. import { MENUS } from '../services/menus-mock';
4. @Injectable()
5. export class MenusService {
6. getMenu(): Promise<any[]> {
7. return Promise.resolve(MENUS);
8. }
9. }

加一个简单得不能再简单的详情页，用来方便点击菜单时作跳转，这里只做了一个页面，所有的菜单都会跳到这个页面：

detail.component.ts

1. import { Component } from '@angular/core';
2. @Component({
3. selector: 'detail-page',
4. templateUrl: './detail.component.html',
5. styleUrls: ['./detail.component.css']
6. })
7. export class detailComponent {}

下面就是给出所以菜单的路由：

navRouter.module.ts

1. import { NgModule } from '@angular/core';
2. import { RouterModule, Routes } from '@angular/router';
3. import { detailComponent } from './detail/detail.component';
4. const appRoutes: Routes = [
5. { path: 'detail/quickstart', component: detailComponent },
6. { path: 'detail/tutorial', component: detailComponent },
7. { path: 'detail/toh-pt1', component: detailComponent },
8. { path: 'detail/toh-pt2', component: detailComponent },
9. { path: 'detail/toh-pt3', component: detailComponent },
10. { path: 'detail/toh-pt4', component: detailComponent },
11. { path: 'detail/toh-pt5', component: detailComponent },
12. { path: 'detail/toh-pt6', component: detailComponent },
13. { path: 'detail/architecture', component: detailComponent },
14. { path: 'detail/displaying-data', component: detailComponent },
15. { path: 'detail/template-syntax', component: detailComponent },
16. { path: 'detail/lifecycle-hooks', component: detailComponent },
17. { path: 'detail/component-interaction', component: detailComponent },
18. { path: 'detail/component-styles', component: detailComponent },
19. { path: 'detail/dynamic-component-loader', component: detailComponent },
20. { path: 'detail/attribute-directives', component: detailComponent },
21. { path: 'detail/structural-directives', component: detailComponent },
22. { path: 'detail/pipes', component: detailComponent },
23. { path: 'detail/animations', component: detailComponent },
24. { path: 'detail/user-input', component: detailComponent },
25. { path: 'detail/forms', component: detailComponent },
26. { path: 'detail/form-validation', component: detailComponent },
27. { path: 'detail/reactive-forms', component: detailComponent },
28. { path: 'detail/dynamic-form', component: detailComponent },
29. { path: 'detail/bootstrapping', component: detailComponent },
30. { path: 'detail/ngmodule', component: detailComponent },
31. { path: 'detail/ngmodule-faq', component: detailComponent },
32. { path: 'detail/dependency-injection', component: detailComponent },
33. { path: 'detail/hierarchical-dependency-injection', component: detailComponent },
34. { path: 'detail/dependency-injection-in-action', component: detailComponent },
35. { path: 'detail/http', component: detailComponent },
36. { path: 'detail/router', component: detailComponent },
37. { path: 'detail/testing', component: detailComponent },
38. { path: 'detail/cheatsheet', component: detailComponent },
39. { path: 'detail/i18n', component: detailComponent },
40. { path: 'detail/language-service', component: detailComponent },
41. { path: 'detail/security', component: detailComponent },
42. { path: 'detail/setup', component: detailComponent },
43. { path: 'detail/setup-systemjs-anatomy', component: detailComponent },
44. { path: 'detail/browser-support', component: detailComponent },
45. { path: 'detail/npm-packages', component: detailComponent },
46. { path: 'detail/typescript-configuration', component: detailComponent },
47. { path: 'detail/aot-compiler', component: detailComponent },
48. { path: 'detail/metadata', component: detailComponent },
49. { path: 'detail/deployment', component: detailComponent },
50. { path: 'detail/upgrade', component: detailComponent },
51. { path: 'detail/ajs-quick-reference', component: detailComponent },
52. { path: 'detail/visual-studio-2015', component: detailComponent },
53. { path: 'detail/styleguide', component: detailComponent },
54. { path: 'detail/glossary', component: detailComponent },
55. { path: 'detail/api', component: detailComponent }
56. ];
58. @NgModule({
59. imports: [
60. RouterModule.forRoot(appRoutes)
61. ],
62. exports: [
63. RouterModule
64. ]
65. })
66. export class AppRoutesModule { }

这里我们把路由单独成一个模块，所有的菜单都会跳转到同一个详情页中，只不过每个菜单都有自己单独的路由。

接下来就是最后一步，也是最关键的一步了，那就是在app.component.ts 中引入上面这些资源：

app.module.ts

1. import { BrowserModule } from '@angular/platform-browser';
2. import { NgModule } from '@angular/core';
3. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
4. import { RouterModule } from '@angular/router';
5. import { AppRoutesModule } from './nav.routes.module';
7. import { AppComponent } from './app.component';
8. import { NavSideComponent } from './sidenav/navSide.component';
9. import { NavMenuComponent } from './sidenav/navMenu.component';
10. import { SideItemComponent } from './sidenav/navItem.component';
11. import { detailComponent } from './detail/detail.component';
12. import { MenusService } from './services/menus.services.component';
14. @NgModule({
15. declarations: [
16. AppComponent,
17. NavSideComponent,
18. NavMenuComponent,
19. SideItemComponent,
20. detailComponent
21. ],
22. imports: [
23. BrowserModule,
24. BrowserAnimationsModule,
25. AppRoutesModule
26. ],
27. providers: [MenusService],
28. bootstrap: [AppComponent]
29. })
30. export class AppModule { }

到这里这个用Angular 实现的多级菜单就已经完成了。不要看代码那么多，其实真正关键的代码非常地少。

最后，想说说这个 Angular 功能模块一个缺点：

由于使用了递归组件的方式来自动判断生成菜单，所以把调用一次组件都会生成一个组件实例，比如，我们第一次进行到这个菜单页面，当前有 5 个菜单，那么就会生成 5 个实例，这样导致的问题是，每个组件的 ngOnInit 函数都会执行一遍。这就相当于 ngOnInit 函数里的代码都会执行5次，如果你点开了一些子菜单，那么就会生成更多的实例，ngOnInit 函数里的代码就会执行更多次。不过这个对于一般的菜单来说也不是什么大问题。

有什么不懂，或者对于上面这个功能模块有什么好的改进意见的可以随时留言，一起交流探讨，我觉得交流分享是最好的提升自身能力的方式之一。

Angular 2+ 实现多级菜单功能模块（树形结构菜单）就分享到这里。