垂直侧边导航栏 - Angular 4 和 Bootstrap 3

Question

垂直侧边导航栏 - Angular 4 和 Bootstrap 3

htmlcssangulartwitter-bootstrap-3

9

我已经使用npm安装程序在我的Angular 4项目中安装了Bootstrap 3。我完成了一个基本站点，并尝试获取一个动态的侧边导航栏，可以切换进出。

我看到网上有一些示例，但似乎无法运行，可能是Bootstrap的更新版本或与Angular的兼容性问题。

有人有任何推荐的导航栏，我可以在这种情况下使用吗？

我的app.component.html中的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>

- VicentVega

你尝试了什么？放一些代码。 - Melchia

是的，请展示你的代码。可能有一个可以使它更加“Angular友好”的包，或者你可以将它包含在index.html文件中。 - Notmfb

我目前正在使用此网站上看到的侧边栏：https://bootsnipp.com/snippets/featured/fancy-sidebar-navigation我将更新问题以展示我的代码。 - VicentVega

你可以在 stackblitz (https://stackblitz.com) 上提供一个可工作的示例。 - yunzen

2个回答

-2

你的代码中可能缺少以下 JavaScript 库，请在 <body> 标签末尾附近的index.html文件中添加它们：

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

- Kushal Bhalaik

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chellappan வ · Accepted Answer

首先，您需要导入Bootstrap 3或使用Bootstrap 3 CDN。

然后，不要使用JQuery，而是使用指令来操作侧边栏的类和样式。

我已经创建了一个无需使用JQuery的同一侧边栏的Stackblitz检查此处：https://stackblitz.com/edit/angular-z6hrob