Выпадающий в Angular6 с Bootstrap 4.1.3 не работает

Question

при попытке реализовать раскрывающийся список в angular-приложении с начальной загрузкой возникли проблемы с макетом раскрывающегося списка. Раскрывающийся список открывается слева от кнопки, а не как реальный раскрывающийся список внизу. Кроме того, полная навигационная панель получает новую высоту.

Мой HTML выглядит следующим образом:

HTML

    <div class="btn-group" >
      <button
        type="button class="
        btn btn-success dropdown-toggle"
        data-toggle="dropdown"
        aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">Login
      </button>
      <div  *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

panelExpanded - это просто логическое значение в .ts-файле.

Я попробовал два предложенных решения, и оба пока не работали:

1. добавление class="dropdown-menu"
2. установка начальной загрузки (см. Далее)

После добавления следующего оператора import в angular.json оно все равно не работает:

"node_modules/bootstrap/dist/css/bootstrap.css",

Дополнительно я установил ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

и бутстрап

npm i --save bootstrap

Я получил следующие сообщения:

bootstrap@4.1.3 requires a peer of jquery@1.9.1

bootstrap@4.1.3 requires a peer of popper.js@^1.14.3

Должен ли я также установить эти два пакета?

Я также пытался включить скрипт ng-bootstrap в angular.json, но безуспешно

"scripts": [
  "node_modules/@ng-bootstrap/ng-bootstrap/fesm5/ng-bootstrap.js",
]

Заранее спасибо за любые отзывы.

Answer 1

Проблема решена.

Это будет HTML для заголовка.

<nav class="navbar navbar-light bg-light mb-5 fixed-top">
      <a class="navbar-brand" href="#">Title</a>
        <div class="navbar-expand mr-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item">
              <a class="nav-link" routerLink="/dashboard">Main Page</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" routerLink="/about">About</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="navbar-expand ml-auto">
        <div class="navbar-nav">
          <ul class="nav nav-pills">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Login</a>
              <div class="dropdown-menu">
                <a class="dropdown-item" routerLink="/signin">My Profile</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" routerLink="/signup">Register</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

и в index.html я добавил эти сценарии.

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

Answer 2

Возможное решение: -

Добавить: - class="dropdown-menu"

Ссылка: - https://stackblitz.com/edit/angular-stqy1h?file=src/app/app.component.html

<div class="btn-group" >
      <button type="button" class="btn btn-success dropdown-toggle"  data-toggle="dropdown" 
      aria-haspopup="false" 
        aria-expanded="false" 
        (click)="panelExpanded = !panelExpanded">
        Login
      </button>
      <div   class="dropdown-menu" *ngIf="panelExpanded" >
        <a class="dropdown-item" routerLink="/signin">Anmelden</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" routerLink="/signup">Registrieren</a>
      </div>
    </div>

Как предложено выше Nizet, вы также можете использовать @ ng-bootstrap.

Для этого: -

1) npm install --save @ng-bootstrap/ng-bootstrap
2) npm i --save bootstrap

angular.json: -

"node_modules/bootstrap/dist/bootstrap.min.css"

или: -

1) npm install --save @ng-bootstrap/ng-bootstrap

2) import bootstrap style sheet file, into root style.css as below:

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css'; 

Для использования ng-bootstrap вам не требуются jquery.js, tether.js или bootstrap.js при использовании ng-bootstrap. Библиотека ng-bottstrap предназначена для замены этих скриптов собственным кодом Angular 2+.

любезно посетите https://ng -bootstrap.github.io / # / home