gpt4 book ai didi

javascript - 在 Angular ts 文件中使用 Bootstrap 、javascript 函数

转载 作者:行者123 更新时间:2023-11-30 21:01:50 25 4
gpt4 key购买 nike

请快速提问。虽然我看到类似的问题和我的相似,但我似乎不理解回复。这是交易。理想情况下,如果有一个页面是使用使用 javascript 函数的 bootstrap 创建的。这个函数要么包含在 bootstrap html 文件中,要么 javascript 文件将作为外部文件并在 bootstrap html 标记中的某处调用。所以我的问题是如何在 Angular 中使用这个 javascript 文件(嵌入式/外部)函数?它是在 index 文件 还是 .ts 文件 或 where?谢谢。

最佳答案

这取决于您希望如何将 Bootstrap 添加到您的项目中。如果您想将 Bootstrap 直接安装到您的项目中,您将编辑您的 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使用以下代码来测试 Bootstrap 是否有效。

<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 .这会将 Bootstrap 和 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 安装 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

关于javascript - 在 Angular ts 文件中使用 Bootstrap 、javascript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47067175/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com