Bootstrap折叠菜单不适用于Angular [英] Bootstrap collapse menu doesn't work with angular

问题描述

我无法使用引导程序和角度菜单来使菜单的折叠"效果起作用，我设置了单独的布局并且一切正常，但是，当我添加角度菜单时，菜单根本不起作用.

I'm having trouble making the "collapse" effect of the menu work using bootstrap and angular, I set up the separate layout and everything is working, however, when I added in the angular, the menu simply does not work.

我一直在阅读，我发现可能存在一些冲突，我看到了一些用数据目标"替换"href"的技巧，但是没有任何效果，希望您的帮助.

I've been reading, and I saw that there may be some conflicts, I saw some tips to replace the "href" with "data-target", but nothing worked, I'd like your help.

html

  <!-- Inicio Sidebar -->
  <div class="col-sm-2" id="sidebar-collapse"> 
      <div class="nav-side-menu bg-dark" >

          <div class="sidebar-profile-pic"></div>
          <span class="nav-link sidebar-profile-name">Douglas Nickson</span>
          <div class="divider"></div>

          <ul class="nav" style="display:block;">
              <li><a href="index.html"><i class="fa-lg fa fa-dashboard" aria-hidden="true"></i> Dashboard</a></li>
              <li class="parent"><a data-toggle="collapse" href="#modulo-item-1">
                  <i class="fa-lg fa fa-book">&nbsp;</i> Modulo <span data-toggle="collapse" href="#sub-item-1" class="icon pull-right"><em class="fa fa-plus"></em></span></a>
                  <ul class="children collapse" id="modulo-item-1">
                      <li><a class="" href="cadastrar-modulo.html">
                          <span class="fa fa-arrow-right">&nbsp;</span> Cadastrar Modulo
                      </a></li>
                      <li><a class="" href="#">
                          <span class="fa fa-arrow-right">&nbsp;</span> Gerenciar Modulo
                      </a></li>
                  </ul>       
              </li>
            </ul>
    </div>
   </div>

angular-cli.json

angular-cli.json

      "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/font-awesome/css/font-awesome.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/popper.js/dist/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js",
    "../src/js/scripts.js"
  ],

我已经安装了引导程序以及所使用的依赖项，但仍然无法正常运行，有关如何解决此问题的任何提示?谢谢.

I already installed the bootstrap, and the dependencies I used, but it still does not work, any tips on how to fix this? Thank you.

推荐答案

正如Ismail Farooq所建议的那样，我已经从此处 ng-bootstrap.github.io/#/home 然后使用其折叠组件在此处输入链接描述

As Ismail Farooq already advised, I have installed ng-bootstrap from here ng-bootstrap.github.io/#/home and then used their collapse component enter link description here

这篇关于Bootstrap折叠菜单不适用于Angular的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！