在 Angular ts 文件中使用引导程序、javascript 函数答案

【问题标题】：Using bootstrap, javascript function in Angular ts file在 Angular ts 文件中使用引导程序、javascript 函数
【发布时间】：2018-04-14 11:56:40
【问题描述】：

请快速提问。尽管我看到与我类似的类似问题，但我似乎不明白答案。这是交易。理想情况下，如果有一个使用 javascript 函数的引导程序创建的页面。该函数要么包含在 bootstrap html 文件中，要么将 javascript 文件作为外部文件制作并在 bootstrap html 标记中的某处调用。所以我的问题是如何在 Angular 中使用这个 javascript 文件（嵌入/外部）函数？它是在 index file 还是 .ts 文件 or where 中？谢谢。

【问题讨论】：

标签： javascript angular typescript angular-ui-bootstrap

【解决方案1】：

这取决于您希望如何将引导程序添加到您的项目中。如果您想直接将引导程序安装到您的项目中，您将编辑您的 index.html 文件，如下所示：

...
<head>
  ...
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <!-- Insert your bootstrap CSS here  -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>

  <!-- Your JQuery here -->
  <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>

  <!-- Your bootstrap JavaScript here -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>

在此之后，您可以继续并开始在您的应用程序中使用它。例如，您可以使用以下代码编辑您的app.component.html 以测试引导程序是否有效。

<div class="container">
 <div class="jumbotron">
   <h1>Angular</h1>
   <h2>Bootstrap Test</h2>
 </div>
 <div class="panel panel-primary">
   <div class="panel-heading">My App Status</div>
    <div class="panel-body">
      <h3>{{title}}</h3>
    </div>
   </div>
 </div>

你也可以像这样使用 npm 安装 bootstrap 和 JQuery： $ npm install bootstrap@3 jquery --save。这会将引导程序和 JQuery 添加到您的 node_modules 目录中。需要的文件是：

node_modules/jquery/dist/jquery.min.js
node_modules/bootstrap/dist/css/bootstrap.min.css
node_modules/bootstrap/dist/js/bootstrap.min.js

之后更新您的.angular-cli.json（如果您使用 angular/cli）将这些文件添加到项目中：

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

或者您可以使用<link> 和<script> 标签将它们直接添加到您的index.html，如上所示。

或者您可以通过 npm 使用 NG-Bootstrap 安装引导程序：npm install --save @ng-bootstrap/ng-bootstrap 安装后将它们的主模块导入到您的 NGModule 中。

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

 @NgModule({
  declarations: [AppComponent, ...],
  imports: [NgbModule.forRoot(), ...],
  bootstrap: [AppComponent]
 })
 export class AppModule {
 }

任何其他需要使用 bootstrap 的模块都需要导入 bootstrap main NgModule。 You can fine example on how to use NG-Bootstrap here

【讨论】：

很高兴我能帮上忙，@user3679513。