如何在angular中创建递归菜单

我有下面的html，它对应于html中的导航栏边栏

我尝试了以下教程，但没有找到想要的想法：

卢西亚·佩雷斯

管理员



会计箱










会计箱










会计箱










会计箱











boxAyuda y Soport账户
账户号：Boxerrar Sesión
法律术语总汇账户

---

但我想知道如何将其转换为递归菜单，但我不太了解递归的概念以及如何在这方面做到这一点

您发布的教程链接很好地描述了如何实现案例的递归结构目标

递归是使用嵌套的“IMenu”对象构建的，该对象保存所有需要的菜单项

为了显示递归对象，组件对每个菜单项使用ng模板。要呈现子项，模板具有嵌套的ng容器，该容器也使用ng模板。有了它，您可以嵌套组件结构

因此，您可以通过在组件的ts文件中定义IMenu对象来控制您的结构

<div class="wrapper">
    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <img src="assets/images/test_img.png" >   
            <p>Lucia Pérez</p>
            <p>Admin</p>
        </div>

        <ul class="seccion-menu-dropdown">
            <li class="active">
                <span class="material-icons"> account_box</span> <a href="#asivamos" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Así Vamos</a>
                <ul class="collapse list-unstyled" id="asivamos">
                    <li>
                        <a href="#">asivamos 1</a>
                    </li>
                    <li>
                        <a href="#">asivamos 2</a>
                    </li>
                    <li>
                        <a href="#">asivamos 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <span class="material-icons"> account_box</span><a href="#pacientes" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pacientes</a>
                <ul class="collapse list-unstyled" id="pacientes">
                    <li>
                        <a href="#">pacientes 1</a>
                    </li>
                    <li>
                        <a href="#">pacientes 2</a>
                    </li>
                    <li>
                        <a href="#">pacientes 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <span class="material-icons"> account_box</span><a href="#escalas" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Escalas</a>
                <ul class="collapse list-unstyled" id="escalas">
                    <li>
                        <a href="#">Escalas 1</a>
                    </li>
                    <li>
                        <a href="#">Escalas 2</a>
                    </li>
                    <li>
                        <a href="#">Escalas 3</a>
                    </li>
                </ul>
            </li>
            <li>
                <span class="material-icons"> account_box</span><a href="#tromboprofilaxis" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Trombo<br/>Efectiva</a>
                <ul class="collapse list-unstyled" id="tromboprofilaxis">
                    <li>
                        <a href="#">tromboprofilaxis 1</a>
                    </li>
                    <li>
                        <a href="#">tromboprofilaxis 2</a>
                    </li>
                    <li>
                        <a href="#">tromboprofilaxis 3</a>
                    </li>
                </ul>
            </li>
        </ul>

        <ul class="menu-final">
            <li><span class="material-icons"> account_box</span>Ayuda y Soporte</li>
            <li><span class="material-icons"> account_box</span>Cerrar Sesión</li>
            <li><span class="material-icons"> account_box</span>Terminos Legales</li>
        </ul>
    </nav>

</div>