Раскрывающийся список ngx-Bootstrap 4 и панель навигации не работают с Angular 7 - PullRequest
Новая
       37

Раскрывающийся список ngx-Bootstrap 4 и панель навигации не работают с Angular 7

1 голос
/ 05 апреля 2019

Я пытаюсь добавить Bootstrap 4 в Angular 7, я вижу, что стили переопределяются стилями начальной загрузки, но панель навигации и раскрывающийся список не работают.

Я следовал этому документу , чтобы добавить Bootstrap в проект Angular 7. Я добавил ниже код для angular.json 

 "styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.js",
           "node_modules/popper.js/dist/umd/popper.js",
          "node_modules/bootstrap/dist/js/bootstrap.bundle.js"
        ]

Вот код вкл у меня на стеке, который не работает

Вот простой jQuery Bootstrap пример , который работает, как и ожидалось

1 Ответ

1 голос
/ 06 апреля 2019

Необходимо внести некоторые изменения в ваш код , чтобы он заработал ... добавлены dropdown, dropdownToggle и *dropdownMenu

проверьте обновленное / работающее приложение.component.html : 

<div class="container">
<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<button type="button" class="btn btn-primary">Primary</button>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Logo</a>

  <!-- Links -->
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Link 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li class="nav-item dropdown" dropdown>
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" dropdownToggle>
        Dropdown link
      </a>
      <div class="dropdown-menu" *dropdownMenu>
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

<div class="dropdown" dropdown>
  <button class="btn btn-primary dropdown-toggle" type="button" dropdownToggle >Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu" *dropdownMenu>
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>
</div>
...