Fatal编程技术网
  • angularjs/
  • Angularjs 如何在Angular 9中使用引导4？

Angularjs 如何在Angular 9中使用引导4？

angularjs bootstrap-4

Angularjs 如何在Angular 9中使用引导4？,angularjs,bootstrap-4,bootstrap-modal,angular9,Angularjs,Bootstrap 4,Bootstrap Modal,Angular9,我是新手。我正在实现模态，但它没有显示 我试过使用引导程序，但它不能正常工作 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button>

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

我试过使用引导程序，但它不能正常工作

 <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>


启动演示模式
情态标题
&时代；
...
接近
保存更改
我认为您没有在项目中正确添加引导。您共享的HTML代码在我看来还行

如果你能分享更多的细节/代码，那么我可以帮助你解决问题

虽然我正在分享如何将引导添加到您的项目中，但请尝试让我知道这是否有效

（方法1） — 使用Angular.json将引导添加到Angular

....
      "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"
      ]
.....
（方法2） — 使用index.html将引导添加到Angular

（方法3） — 使用ng引导和ngx引导向Angular添加引导

方法1:

运行以下命令-

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"
      ]
.....
方法2:

您还可以使用index.html文件包含节点_模块/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>
您想要实现什么，您尝试过什么请告诉我们更多我尝试先添加引导库并添加此代码，但我不了解如何在此按钮上显示模态单击@silentsudo