基於angular的菜單遞歸

基於angular的菜單遞歸

1. ngfor 頂層調用菜單組件

通過angular的for循環指令調用菜單樹形數據結構。

          <app-menu-item
            *ngFor="let menuItem of menu"
            [menuItem]="menuItem"
            [isRoot]="true"
          ></app-menu-item>

2. 多級菜單的遞歸調用

菜單組件的ts文件，定義多級菜單默認都是閉合。

import { Component, OnInit, Input } from '@angular/core';
import { MenuItem } from '../models/menu-item';

@Component({
  selector: 'app-menu-item',
  templateUrl: './menu-item.component.html',
  styleUrls: ['./menu-item.component.scss']
})
export class MenuItemComponent implements OnInit {
  @Input() menuItem: MenuItem;
  @Input() isRoot: boolean;

  isOpen = false;

  constructor() {}

  ngOnInit() {}

  onMenuItemSelected(menuItem: MenuItem): void {
    console.log(menuItem);
  }
}

• 定義多級菜單在有子菜單集合時爲根菜單。定義菜單項的顏色，展開/閉合狀態，點擊事件（切換展開/閉合）；
• 根據菜單狀態值判斷是否進行下級菜單的渲染；
• 定義當前菜單項爲末級菜單時的模板；

<div>
  <p *ngIf="menuItem.children; else finalItem">
    <ion-button
      [color]="isRoot ? 'primary' : 'secondary'"
      [expand]="isRoot ? 'full' : 'block'"
      (click)="isOpen = !isOpen"
    >
      {{ menuItem.name }}
    </ion-button>

    <span *ngIf="isOpen">
      <app-menu-item
        *ngFor="let item of menuItem.children"
        [menuItem]="item"
      ></app-menu-item>
    </span>
  </p>
</div>

<ng-template #finalItem>
  <p>
    <ion-button color="light" expand="full" (click)="onMenuItemSelected(menuItem)">
      {{ menuItem.name }}
    </ion-button>
  </p>
</ng-template>

3. 菜單模型

• 菜單名稱，用於展示；
• 菜單id，用於數據結構編排；
• 子菜單集合，形成樹形，便於展開；

export class MenuItem {
  name: string;
  id: number;
  children: Array<MenuItem>;
}

4.菜單的json文件

menu-Item.ts，與3中的菜單模型數據結構保持一致生成。

export const menuItems = [
  {
    name: 'Appetizers',
    id: 1,
    children: [
      {
        name: 'Fresco Salsa',
        id: 6,
        children: null
      }
    ]
  },
  {
    name: 'Main dishes',
    id: 2,
    children: [
      {
        name: 'Beef',
        id: 7,
        children: [
          {
            name: 'Crispy Orange Beef',
            id: 10,
            children: null
          }
        ]
      },
      {
        name: 'Burger',
        id: 8,
        children: [
          {
            name: 'Chorizo Burger',
            id: 11,
            children: null
          }
        ]
      },
      {
        name: 'Vegetarian',
        id: 9,
        children: [
          {
            name: 'Chile Rellenos',
            id: 12,
            children: null
          }
        ]
      }
    ]
  },
  {
    name: 'Side dishes',
    id: 3,
    children: [
      {
        name: 'Baked potato',
        id: 13,
        children: null
      }
    ]
  },
  {
    name: 'Salads',
    id: 4,
    children: [
      {
        name: 'Taco Slaw',
        id: 14,
        children: null
      }
    ]
  },
  {
    name: 'Desserts',
    id: 5,
    children: [
      {
        name: 'Crepes',
        id: 15,
        children: null
      }
    ]
  }
];

5 最終菜單效果圖

---

版權聲明：本文爲博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。 本文鏈接：https://www.cnblogs.com/JerryMouseLi/p/15843718.html