He instalado bootstrap 3 en mi proyecto angular 4 usando el instalador npm. Tengo un sitio básico terminado y estoy tratando de obtener una barra sideNav dinámica que entre y salga.

He visto algunos ejemplos en línea, sin embargo, no parecen funcionar, ya sea una versión más nueva de bootstrap o problemas de compatibilidad con angular.

¿Alguien tiene alguna recomendación para una barra de navegación que pueda usar en este caso?

El HTML en mi app.component.html:

<!-- Sidebar -->
<script src="src/Javascript/sidebar.js"></script>
<nav class="navbar navbar-inverse navbar-fixed-left" id="sidebar-wrapper" role="navigation">
    <ul class="nav sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                Brand
            </a>
        </li>
        <li>
            <a href="#">Home</a>
        </li>
        <li>
            <a href="#">About</a>
        </li>
        <li>
            <a href="#">Events</a>
        </li>
        <li>
            <a href="#">Team</a>
        </li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                Works <span class="caret"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">About</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Clients</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Services</a>
        </li>
        <li>
            <a href="#">Contact</a>
        </li>
    </ul>
</nav>
8
VicentVega 15 nov. 2017 a las 02:08

2 respuestas

La mejor respuesta

Primero debe importar bootstrap 3 o usar Bootstrap 3 CDN

Luego, en lugar de usar JQuery, use la directiva para manipular la clase y el estilo de la barra lateral

He creado Stack blitz para la misma barra lateral sin utilizar JQuery. Compruebe esto: https://stackblitz.com/edit/ angular-z6hrob

8
Chellappan வ 1 ago. 2018 a las 18:33

Probablemente le falten las siguientes bibliotecas JS en su código, agréguelas en su index.html cerca del final de la etiqueta <body>:

    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <!-- Popper.JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap Js CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- jQuery Custom Scroller CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
-2
kushal.8 1 ago. 2018 a las 14:07