Блог

У меня есть следующий 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>

  

Но я хотел бы знать, как превратить его в рекурсивное меню, но я не очень хорошо понимаю идею рекурсии и как это сделать в этом аспекте

Ваша опубликованная ссылка на учебник хорошо описывает, как вы можете достичь цели рекурсивной структуры для вашего случая.

Рекурсия создается с помощью вложенного объекта ‘IMenu’, который содержит все необходимые пункты меню.

Для отображения рекурсивного объекта компонент использует ng-шаблон для каждого отдельного пункта меню. Для отображения подпунктов шаблон имеет вложенный ng-контейнер, который также использует ng-template. С помощью этого вы можете вложить свою компонентную структуру.

Таким образом, вы можете управлять своей структурой, определяя IMenu-объект в ts-файле компонента.