Question

嗨，我正在开发一个多级树下拉组件。但是，由于数据可能具有这么多的级别和子级别，因此对如何开发组件感到困惑。目前仍停留在更好的方法或想法上

我知道如何使用纯HTML和CSS对数据进行硬编码并创建如下所示的菜单。如何使用Angular后端动态数据？提前致谢。 HTML：

<ul class="top-level-menu">
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

样本数据：

data =  [
        {
          id: 1,
          name: 'root1',
          children: [
            { id: 2, name: 'child1' },
            { id: 3, name: 'child2' }
          ]
        },
        {
          id: 4,
          name: 'root2',
          children: [
            { id: 5, name: 'child2.1' },
            {
              id: 6,
              name: 'child2.2',
              children: [
                { id: 7, name: 'subsub' }
              ]
            }
          ]
        }
      ];

Answer 1

在这种情况下，我不认为您可以使组件完全动态，但是在打字稿中可以有一个对象数组，该对象数组在菜单中具有所有选项，并使用*ngFor进行迭代。

在.ts

中

let menu = [{
        'About': '#link'
    },
    {
        'Services': '#link'
    }, {
        'offices': [{
            'Chicago': '#link'
        }, {
            'Los Angeles': '#link'
        }, {
            'New York': [{
                'Information': '#link'
            }, {
                'Book a Meeting': "#link"
            }]
        }]
    }
]

并遍历html中的这些嵌套对象。如果您没有太多要添加的内容，请从菜单中频繁删除，最好进行硬编码。

Answer 2

我不知道您是否还在寻找答案。如果是，对于新查看器，我已经为Angular创建了一个插件，该插件创建了一个多级菜单。

这里是NPM Link和Github Link，文档非常简单。

以防万一，如果您想查看更多示例，我为您准备了demo，这就是演示的Github Repo。

如果某些功能不适合您，但您仍然想使用此插件，那么create an issue here我会帮您的忙。

P.S。它也可以在IE11中使用。

谢谢

Angular 2的多级下拉菜单（树形下拉菜单）

2 个答案: