Bootstrap не работает должным образом в проекте angular

Question

Я впервые создаю проект Angular. У меня проблемы с bootstrap в моем проекте. Я установил bootstrap, jquery, popper. js и включил их в файл angular. json.

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

Bootstrap классы работают, но выпадающие списки не работают должным образом, я думаю, что что-то не так с bootstrap .min. js. Выпадающий список должен открыться после нажатия на него:

Но в моем случае он уже открыт:

Answer 1

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

Вот два варианта (без определенного порядка).

• https://github.com/ng-bootstrap/ng-bootstrap
• https://github.com/valor-software/ngx-bootstrap

Answer 2

Есть 3 способа использования bootstrap в angular

npm install bootstrap --save

1. в angular. json файл добавить путь к модулю bootstrap, например:

     "styles": [
         "./node_modules/bootstrap/dist/css/bootstrap.css",
         "src/styles.css"              
       ]
   

2. В index. html файл добавить файл bootstrap. css как внешний css.

3. Вы можете включить bootstrap. css в файл style. css или style.s css, например:

   @ import "~ bootstrap / dist / css / bootstrap. css"

Answer 3

Просто установите npm i bootstrap также вы можете проверить документацию здесь

После установки Просто добавьте строку ниже в style.css файл

@import '~bootstrap/dist/css/bootstrap.min.css';

после этого добавьте это ссылка ниже в 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>

HTML

<div class="container">
    <!-- Content here -->
    <ul class="nav nav-pills">
        <li class="nav-item">
            <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Action</a>
                <a class="dropdown-item" href="#">Another action</a>
                <a class="dropdown-item" href="#">Something else here</a>
                <div class="dropdown-divider"></div>
                <a class="dropdown-item" href="#">Separated link</a>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
        </li>
    </ul>
</div>

---

Дополнительные варианты оформления заказа в bootstrap документации Здесь

вы можете проверить здесь Stackblitz

Answer 4

Я предлагаю вам использовать ng- bootstrap для Bootstrap компонентов в Angular, а не просто включать bootstrap .min. js скрипт.

Способ добавления bootstrap раскрывающийся список: https://stackblitz.com/run?file=src%2Fapp%2Fdropdown-basic.module.ts

Ссылка: https://ng-bootstrap.github.io/# / components / dropdown / examples