Question

使用此命令npm install Bootstrap和Jquery安装后，如果bootstrap是否以角度安装，仍然无法获取

输出：

HTML模板：

<div style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" routerLink="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-item nav-link active" routerLink="/page1">Page 1 <span class="sr-only">(current)</span></a>
      </div>
    </div>
  </nav>
  <button type="btn btn-primary">Hello</button>
 </div> 

<router-outlet></router-outlet>

Index.html：[仅当我在index.html中添加jquery和Bootstrap cdn时，它才能正常工作，但我想这不是正确的解决方案吧？]

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularAssignment</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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


</head>
<body class="hello">
  <app-root></app-root>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" ></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>
</body>
</html>

Answer 1

按照@Dániel Barta的建议，做<div id='withJS'> <form> Name:<br> <input type="text"> <br> Date:<br> <input type="date"> <br><br> <input type="submit" value="Submit" onclick='validateForm()'> </form> <div class='errorMsg'>error message here</div> </div> 不够。现在，您必须将已安装的软件包导入到您的应用程序中。

在应用程序的根目录下，找到名为 angular.json 的文件。

引导程序：

在该json文件中，搜索表示路径数组的npm install属性
在该数组的末尾添加"styles"

JQuery

在该json文件中，搜索"node_modules/bootstrap/dist/css/bootstrap.min.css"属性，该属性表示同样是js文件的路径的数组。
在该数组的末尾添加"scripts"

如果要使用bootstrap.js，请在下面的jquery import中添加其路径：

JQuery + bootstrap.js ：

“ node_modules / jquery / dist / jquery.min.js”，

“ node_modules / bootstrap / dist / js / bootstrap.js”

因此， Bootstrap CSS + jquery + bootstrap.js 导入应如下所示：

"node_modules/jquery/dist/jquery.min.js"

如果您已经在样式或脚本数组中拥有自己的路径，请保留它们，然后将这些路径添加到数组的底部。

我能给您的最好建议是浏览Angular文档，对安装软件包及其所有工作方式进行一些研究。

Answer 2

如果可以在node_module文件夹中看到它们。已安装。但是，您还必须在Angular应用程序中导入模块和CSS文件。您可以找到有关Bootstrap here的很好的材料，对于jQuery，您必须转到 .angular-cli.json 文件并将其转到scripts属性： "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Angular 7：Jquery和Bootstrap无法正常工作

2 个答案: