如何在angular中制作递归菜单

Question

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

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

https://www.ozkary.com/2017/06/angular2-navigation-menu-with-recursive.html

<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>

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

Answer 1

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

递归是用嵌套的"IMenu"对象构建的，该对象包含所有需要的菜单项。

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

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