Angular SPA 应用中如何实现多级菜单

在单页应用（SPA）中，菜单是一个重要的组成部分，它帮助用户快速导航到需要的内容。而在多级菜单中，用户可以更加快速地访问到更深层次的内容。在 Angular 中，实现多级菜单可以使用 Angular Material 和路由器。

Angular Material

Angular Material 是一个 UI 组件库，它提供了很多常用的组件，例如按钮、卡片、对话框等。在实现多级菜单时，我们主要使用菜单组件和侧边栏组件。

首先，我们需要安装 Angular Material。在命令行中执行以下命令即可：

ng add @angular/material

接下来，在需要使用菜单的组件中，导入菜单和侧边栏组件：

// www.javascriptcn.com code example
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';

@NgModule({
  imports: [
    MatMenuModule,
    MatSidenavModule,
  ],
})
export class AppModule { }

路由器

在 Angular 中，使用路由器定义应用程序的导航。在实现多级菜单时，我们可以使用路由器来定义每个菜单项对应的路由。定义路由时，可以使用“子路由”，从而实现多级路由。

首先，我们需要在 app.module.ts 中定义路由：

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { MenuComponent } from './menu/menu.component';
import { SubmenuComponent } from './submenu/submenu.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'menu',
    component: MenuComponent,
    children: [
      { path: 'submenu1', component: SubmenuComponent },
      { path: 'submenu2', component: SubmenuComponent },
    ],
  },
];

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

接下来，在菜单组件中，使用菜单组件和路由器来实现多级菜单：

// www.javascriptcn.com code example
<button mat-button [matMenuTriggerFor]="menu">Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item routerLink="/">Home</button>
  <button mat-menu-item [matMenuTriggerFor]="submenu1">Submenu 1</button>
  <button mat-menu-item [matMenuTriggerFor]="submenu2">Submenu 2</button>
</mat-menu>

<mat-menu #submenu1="matMenu">
  <a mat-menu-item routerLink="/menu/submenu1">Submenu 1 - Item 1</a>
  <a mat-menu-item routerLink="/menu/submenu1">Submenu 1 - Item 2</a>
</mat-menu>

<mat-menu #submenu2="matMenu">
  <a mat-menu-item routerLink="/menu/submenu2">Submenu 2 - Item 1</a>
  <a mat-menu-item routerLink="/menu/submenu2">Submenu 2 - Item 2</a>
</mat-menu>

在上面的代码中，我们定义了两个子菜单 submenu1 和 submenu2，并定义了每个菜单项对应的路由。当用户点击一个菜单项时，路由器会自动导航到对应的路由和组件。

示例代码

以下是一个完整的示例代码，用于演示如何实现多级菜单：

app.module.ts

// www.javascriptcn.com code example
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { MenuComponent } from './menu/menu.component';
import { SubmenuComponent } from './submenu/submenu.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  {
    path: 'menu',
    component: MenuComponent,
    children: [
      { path: 'submenu1', component: SubmenuComponent },
      { path: 'submenu2', component: SubmenuComponent },
    ],
  },
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    MenuComponent,
    SubmenuComponent,
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    BrowserAnimationsModule,
    MatMenuModule,
    MatSidenavModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

app.component.html

// www.javascriptcn.com code example
<mat-sidenav-container>
  <mat-sidenav mode="side">
    <button mat-button routerLink="/">Home</button>
    <button mat-button routerLink="/menu">Menu</button>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

home.component.html

<h1>Home</h1>

menu.component.html

// www.javascriptcn.com code example
<button mat-button [matMenuTriggerFor]="menu">Menu</button>

<mat-menu #menu="matMenu">
  <button mat-menu-item routerLink="/">Home</button>
  <button mat-menu-item [matMenuTriggerFor]="submenu1">Submenu 1</button>
  <button mat-menu-item [matMenuTriggerFor]="submenu2">Submenu 2</button>
</mat-menu>

<mat-menu #submenu1="matMenu">
  <a mat-menu-item routerLink="/menu/submenu1">Submenu 1 - Item 1</a>
  <a mat-menu-item routerLink="/menu/submenu1">Submenu 1 - Item 2</a>
</mat-menu>

<mat-menu #submenu2="matMenu">
  <a mat-menu-item routerLink="/menu/submenu2">Submenu 2 - Item 1</a>
  <a mat-menu-item routerLink="/menu/submenu2">Submenu 2 - Item 2</a>
</mat-menu>

submenu.component.html

<h1>Submenu 1</h1>

以上是一个简单的示例，演示了如何使用 Angular Material 和路由器实现多级菜单。在实际应用中，你可以根据实际需求来自定义菜单的样式和行为，以及路由的配置方式。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d740d7a941bf7134d1bcdd