创建由 JSON 驱动的动态多级菜单

Question

问题

我正在尝试在 Angular 中创建由 JSON 驱动的动态多级主导航（菜单）。

在 AngularJS 中，我会定义一个模板并递归地使用它来根据需要动态创建额外级别的菜单。

在 Angular 中，我找不到动态创建这些级别的菜单的方法。

目前我已对其进行硬编码以允许两个级别，但如果将来需要添加更多级别，则必须对每个级别进行硬编码才能工作。

我正在寻找一种基于为菜单返回的 JSON 动态执行此操作的方法。

JSON

menu = [
  {
    title: "Menu Item 1",
        url: "/",
        target: "_blank"
    },
    {
    title: "Menu Item 2",
        active: true,
        navigationItems: [
            {
              title: "Sub-Menu Item 1",
              url: "/"
            },
            {
              title: "Sub-Menu Item 2",
              url: "/",
              navigationItems: [
                  {
                      title: "This Level Not Supported Without Hard-Coding"
                  }
              ]
            }
        ]
    }
]

标记

<div>
    <ul role="menubar">
        <li *ngFor="let link of menu; let i = index;">

            <a 
              [attr.href]="link.href ? link.href : null"
              [attr.target]="link.target ? link.target : null"
              aria-role="menuitem"
              [attr.ariaExpanded]="link.navigationItems && openElements[i] ? true : null"
              [attr.ariaHasPopup]="link.navigationItems ? true : null"
              (click)="link.navigationItems ? openElements[i] = !openElements[i] : null"
              [class]="openElements[i] ? 'open' : null"
            >
              {{link.title}}
            </a>

            <ul *ngIf="link.navigationItems" role="menu">
                <li *ngFor="let link of link.navigationItems">
                    <a [attr.href]="link.url"
                        [innerHTML]="link.title"
                        [attr.target]="link.target ? link.target : null"
                        role="menuitem"
                    >
                    </a>
                </li>
            </ul>

        </li>
    </ul>
</div>

一个工作示例

https://plnkr.co/edit/lpLxHlKtwCJUukoruxq2?p=preview

解决方案

我需要一种方法来确保可以根据从附加到组件的数据服务返回的 JSON 的结构将任意数量的级别添加到此菜单中，而无需在每个标记中硬编码级别水平。

Answer 1

设置自定义递归组件

NavItem.d.ts

export interface NavItem {
  title: string;
  active: boolean;
  target: string;
  url: string;
  navigationItems: NavItem[];
}

NavItem.component.ts

import { Component, Input } from '@angular/core';
import { NavItem } from 'NavItem.d.ts';

@Component({
  selector: 'nav-item',
  template: 'NavItem.component.html'
})
export class NavItemComponent {

    @Input() private navItems: NavItem[];

    constructor() {
    }
}

NavItem.component.html

<ul role="menubar">
  <li *ngFor="let item of navItems">
    <a ...>{{ item.title }}</a>
    <nav-item *ngIf="item.navigationItems" [navItems]="item.navigationItems"></nav-item>
  </li>
</ul>

用法：在可以访问 navItems 的现有模板中

<nav-item [navItems]="navItems"></nav-item>