如何在 Angular 9 中使用引导程序 4？答案

【问题标题】：How can I use bootstrap 4 in Angular 9?如何在 Angular 9 中使用引导程序 4？
【发布时间】：2021-08-06 09:24:34
【问题描述】：

我是角度新手。我正在实现模态但它没有显示？

我尝试使用引导程序，但它无法正常工作

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
                Launch demo modal
              </button>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

【问题讨论】：

你想达到什么，你尝试过什么，请告诉我们更多
我尝试首先添加引导库并添加此代码，但我不明白如何在此按钮上显示模式点击@silentsudo

标签： angularjs bootstrap-4 bootstrap-modal angular9

【解决方案1】：

我认为您没有在项目中正确添加引导程序。你分享的 HTML 代码在我看来没问题。

如果您可以分享更多详细信息/代码，那么我可以帮助您解决问题。

虽然我正在分享将引导程序添加到您的项目的方法，但请尝试让我知道这是否有效。

（方法一） — 使用 angular.json 将 Bootstrap 添加到 Angular

（方法二） — 使用 index.html 将 Bootstrap 添加到 Angular

（方法三） — 使用 ng-bootstrap 和 ngx-bootstrap 将 Bootstrap 添加到 Angular

方法一：

运行以下命令-

npm install bootstrap --save
npm install jquery --save

angular.json

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

方法二：

您还可以使用 index.html 文件从 node_modules/bootstrap 中包含引导文件。从方法 1 运行命令。

然后是Index.html

<!doctype html><html lang="en">
<head>  
<meta charset="utf-8">  
<title>Angular Bootstrap 4 Examples</title>  <base href="/">  
<meta name="viewport" content="width=device-width, initial-scale=1">  
<link rel="icon" type="image/x-icon" href="favicon.ico">  
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>  
<app-root></app-root>  
<script src="../node_modules/jquery/dist/jquery.js"></script>  <script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>    
</body>
</html>

方法三：

链接：https://ng-bootstrap.github.io/#/home

ng add @ng-bootstrap/ng-bootstrap

【讨论】：