Angular 中实现多级菜单组件的技巧-JavaScript中文网-JavaScript教程资源分享门户

在现代 Web 应用程序中，菜单是一个必不可少的组件，尤其是在多级路由应用程序中。Angular 是一个流行的前端框架，它提供了一种简单而强大的方式来构建 Web 应用程序。在本文中，我们将学习如何使用 Angular 实现多级菜单组件。

实现思路

在 Angular 中实现多级菜单组件的思路非常简单，它主要分为以下几个步骤：

创建一个菜单组件，它包含了多个菜单项。
在菜单项中，使用 Angular 的内置指令 *ngIf 和 *ngFor 来渲染子菜单。
在菜单项中，使用 Angular 的内置指令 routerLink 来实现路由导航。
在菜单组件中，使用 Angular 的内置指令 ng-template 来定义菜单项的模板。

实现步骤

第一步：创建菜单组件

我们首先需要创建一个菜单组件，它包含了多个菜单项。在组件中，我们可以使用 *ngFor 指令来循环渲染菜单项。每个菜单项都有一个标题和一个子菜单。

// www.javascriptcn.com code example
<ng-template #menuTemplate let-menuItems>
  <ul>
    <li *ngFor="let menuItem of menuItems">
      <a [routerLink]="menuItem.link">{{ menuItem.title }}</a>
      <ng-container *ngIf="menuItem.children">
        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: menuItem.children }"></ng-container>
      </ng-container>
    </li>
  </ul>
</ng-template>

<div [ngClass]="{ 'menu-open': isOpen }">
  <button (click)="toggleMenu()">Toggle Menu</button>
  <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: menuItems }"></ng-container>
</div>

我们在上面的代码中使用了 ng-template 来定义菜单项的模板。我们将模板存储在一个变量中，以便我们可以在组件中使用它。

第二步：使用 `ngIf` 和 `ngFor` 渲染子菜单

在每个菜单项中，我们使用 *ngIf 指令来检查是否有子菜单。如果有子菜单，我们就使用 *ngFor 指令来循环渲染它们。我们可以使用递归的方式来循环渲染子菜单。

// www.javascriptcn.com code example
<li *ngFor="let menuItem of menuItems">
  <a [routerLink]="menuItem.link">{{ menuItem.title }}</a>
  <ng-container *ngIf="menuItem.children">
    <ul>
      <li *ngFor="let childMenuItem of menuItem.children">
        <a [routerLink]="childMenuItem.link">{{ childMenuItem.title }}</a>
        <ng-container *ngIf="childMenuItem.children">
          <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: childMenuItem.children }"></ng-container>
        </ng-container>
      </li>
    </ul>
  </ng-container>
</li>

第三步：使用 `routerLink` 实现路由导航

在菜单项中，我们使用 routerLink 指令来实现路由导航。我们可以将菜单项的链接传递给 routerLink 指令，这样当用户点击菜单项时，就会导航到相应的路由。

<a [routerLink]="menuItem.link">{{ menuItem.title }}</a>

第四步：使用 `ng-template` 定义菜单项的模板

在组件中，我们使用 ng-template 来定义菜单项的模板。我们将模板存储在一个变量中，以便我们可以在组件中使用它。

// www.javascriptcn.com code example
<ng-template #menuTemplate let-menuItems>
  <ul>
    <li *ngFor="let menuItem of menuItems">
      <a [routerLink]="menuItem.link">{{ menuItem.title }}</a>
      <ng-container *ngIf="menuItem.children">
        <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: menuItem.children }"></ng-container>
      </ng-container>
    </li>
  </ul>
</ng-template>

完整示例代码

// www.javascriptcn.com code example
import { Component } from '@angular/core';

@Component({
  selector: 'app-menu',
  template: `
    <ng-template #menuTemplate let-menuItems>
      <ul>
        <li *ngFor="let menuItem of menuItems">
          <a [routerLink]="menuItem.link">{{ menuItem.title }}</a>
          <ng-container *ngIf="menuItem.children">
            <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: menuItem.children }"></ng-container>
          </ng-container>
        </li>
      </ul>
    </ng-template>

    <div [ngClass]="{ 'menu-open': isOpen }">
      <button (click)="toggleMenu()">Toggle Menu</button>
      <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: menuItems }"></ng-container>
    </div>
  `
})
export class MenuComponent {
  isOpen = false;

  menuItems = [
    {
      title: 'Home',
      link: '/',
      children: null
    },
    {
      title: 'Products',
      link: '/products',
      children: [
        {
          title: 'Product 1',
          link: '/products/1',
          children: null
        },
        {
          title: 'Product 2',
          link: '/products/2',
          children: null
        }
      ]
    },
    {
      title: 'About',
      link: '/about',
      children: null
    }
  ];

  toggleMenu() {
    this.isOpen = !this.isOpen;
  }
}

指导意义

在本文中，我们学习了如何使用 Angular 实现多级菜单组件。我们使用了 Angular 的内置指令 *ngIf、*ngFor 和 routerLink 来实现菜单项的渲染和导航。我们还使用了 ng-template 来定义菜单项的模板。这种实现方式可以让我们轻松地创建多级菜单，并且具有良好的可扩展性。如果您正在开发一个多级路由应用程序，那么这种实现方式将非常有用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d3bd48a941bf7134715639

Angular 中实现多级菜单组件的技巧