如何實現正常引導到 Angular 應用程序？

Question

我還想知道，即使我們使用腳本安裝引導程序，angular 應用程序有時也不支持導航欄 class、折疊 class 和下拉菜單、切換按鈕。

我想知道的是如何能夠一次實現對 Angular 應用程序的每個 Bootstrap class 支持。

請幫助我。 感謝您！

Answer 1

Bootstrap 依賴於 jQuery 和 popper.js 庫，如果你不將它們包含在你的項目中，任何依賴於 JavaScript 的 Bootstrap 組件都將不起作用。

更好的方法是使用為使 Bootstrap 與 Angular 無縫協作而創建的組件庫，例如ng-bootstrap和ngx-bootstrap

您想像這樣將引導程序 5 添加為 npm package

npm install bootstrap@next

在您的 angular.json 添加引導樣式表和 javascript

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

"scripts": [
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

現在添加 popperjs 並將其添加到您的腳本中

npm install @popperjs/core

"scripts": [
  "./node_modules/@popperjs/core/dist/umd/popper.min.js",
  "./node_modules/bootstrap/dist/js/bootstrap.min.js"
]

將下拉組件添加到您的 app.component.html

<div class="dropdown">
  <button
    class="btn btn-secondary dropdown-toggle"
    type="button"
    id="dropdownMenuButton1"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>