Angular 2 的多級下拉菜單（樹下拉菜單）

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 鏈接和Github 鏈接，文檔非常簡潔。

以防萬一，如果你想看更多的例子，我有一個演示給你，這是演示的Github Repo 。

如果某些東西對你不起作用，而你仍然想使用這個插件，那么在這里創建一個問題，我會幫助你。

PS 它也適用於 IE11。

謝謝