тег:

ановил bootstrap 3 в свой проект angular 4 с помощью установщика npm. У меня есть базовый сайт, и я пытаюсь получить динамическую боковую панель, которая будет включаться и выключаться.

Я видел несколько примеров в Интернете, однако они, похоже, не работают, будь то более новая версия начальной загрузки или проблемы совместимости с angular.

У кого-нибудь есть какие-либо рекомендации для панели навигации, которые я мог бы использовать в этом случае?

HTML в моем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>
 yunzen07 авг. 2018 г., 13:33
Вы могли бы привести рабочий пример на stackblitz (stackblitz.com)
 VicentVega15 нояб. 2017 г., 00:55
В настоящее время я использую боковую панель, увиденную на этом сайте:bootsnipp.com/snippets/featured/fancy-sidebar-navigation Я обновлю вопрос, чтобы показать мой код
 Melchia15 нояб. 2017 г., 00:45
Что ты пробовал? Положить код
 Notmfb15 нояб. 2017 г., 00:50
Да, поставить код. Может быть пакет, который делает его более дружественным к Angular, или вы можете включить его в файл index.html.

Ответы на вопрос(2)

Решение Вопроса

3 CDN.

Тогда вместо использования JQuery используйте директиву для управления классом и стилем боковой панели

Я создал блик стека для той же боковой панели без использования JQuery. Проверьте это:https://stackblitz.com/edit/angular-z6hrob

 Deepak Verma06 авг. 2018 г., 09:12
Вы используете какой-либо модуль npm для этого?
 Deepak Verma06 авг. 2018 г., 09:17
хм, что это такое sidebar.directive.ts вы импортировали это в файл модуля приложения
 Chellappan06 авг. 2018 г., 09:19
это угловая директива, которая используется для переключения класса начальной загрузки при нажатии на иконку
 Deepak Verma06 авг. 2018 г., 09:23
если вы не возражаете, не могли бы вы прийти в чат?
 Chellappan06 авг. 2018 г., 09:15
я не использую какой-либо модуль npm для этого. только бутстрап

вам не хватает следующих библиотек JS в вашем коде, добавьте их в свой кодindex.html ближний конец<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>

Ваш ответ на вопрос