- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
请快速提问。虽然我看到类似的问题和我的相似,但我似乎不理解回复。这是交易。理想情况下,如果有一个页面是使用使用 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/
如何将多个 TS 文件合并为一个具有正确时间戳的 TS 文件?我可以将文件合并为一个,而无需接触数据。这将生成一个可播放的文件,但时间戳不正确,因此不会显示时间线(例如在 VLC 中)。因此,我需要重
有一个视频,其实是一个HLS流(TS文件的序列) 我想取出一个 TS block 并用另一个替换它。 另一个 block 将使用相同的 FFMPEG 编码设置进行编码。 如果你想知道我为什么需要这个:
这段代码取自https://en.cppreference.com/w/cpp/utility/variant/visit using var_t = std::variant; template s
我刚刚开始使用 ts-node。这是一个非常方便的工具。运行时间看起来很清晰。但它不适用于 CLI 解决方案。我无法将参数传递到编译的脚本中。 ts-node --preserve-symlinks
如果您愿意花 2 美分来解决调用另一个文件中定义的函数的问题,我将不胜感激。我阅读了 Typescript 的文档,其中建议设置一个接口(interface)或一个模块,然后引用它,但我收到了与下面相
我在努力 tsc ts/game.ts --out test.js --module amd 在我在 webstorm 中的 typescript 项目上,但是控制台没有显示任何错误,也没有输出 t
我已经意识到有一段时间了,一些 typescript 文件有一个 .d.ts 而其他的只有一个 .ts 扩展名。 它们代表什么?有什么区别? 最佳答案 这些是 declaration files ,或
是否有一种简单的方法可以将std::variant中包含的数据移动到std::variant中? 我想可以通过一个额外的类模板来切换Ts...中的所有类型,但是我想知道是否存在一种更优雅的就地方法。
我是 Angular 的新手,正在查看文档,但我想我也应该在这里问我的问题。 我正在导出一个越来越大的类,因此我想将其分成两个文件,并将 d1、d2、d3 等存储在一个单独的文件中,然后将它们导入到
无法通过指定 ts.t 找到条目(ts 是时间戳类型) 挖oplog,想搞清楚一秒钟有多少操作。 无法通过指定时间戳字段找到条目,其他字段可以。$在蒙戈外壳中: > db.oplog.rs.findO
这是我的 Angular5 项目结构。 tsconfig.app.json 和package.json 都包含这个部分 "include": [ "/src/main.ts",
我在 Angular 10 中有一个项目,遇到了奇怪的 TS (TSLint) 错误。在我使用 $localize 的任何地方的 Visual Studio Code 中,我都收到错误消息 Canno
所以我创建了一个快速服务器,它获取一个 mp3 文件(现在存储在本地,但稍后将从 mongo db 中获取)并使用 ffmpeg 制作 .m3u8 和 .ts 文件。文件成功发送到客户端,在客户端播放
我有一个 MY_FILE.ts像这样的文件: const someFunction = (param: MY_NAMESPACE.PARAM) : boolean => { // DO SOMETHI
我过去常常在运行前编译用 TS 编写的 e2e Protractor 测试,但现在我想出了如何在运行时编译 ts 文件——ts-node 似乎是一个很好的工具。正如许多文章所说,我在 Protract
我不熟悉 mod-rewrite,我找不到任何类似的问题或解决方案。 非常感谢... 模板: {query1}_{query2}.ts ts.php?v={query1}&seg={query2} 例
我有 firestore.service.ts,在一种方法中,我在 firebase 中创建和更新了一个集合……离开该方法后,我更改了集合的“id”,但我需要这个“id”是没有丢失,因为我需要它到下一
DefinitelyTyped 有许多库的类型定义,但当 Javascript 实现与 Typescript 分离时,我常常找不到使用它们的好方法,比如当库通过 a 将自己分配给窗口的属性时 标记,
我正在寻找一种在我发布到 NPM 时忽略项目中所有 .ts 文件的好方法,我可以通过将以下内容添加到我的 .npmignore 文件中来做到这一点: *.ts 但是等等......实际上我想在我的项目
我的 Yarn 工作区结构如下: /project package.json /packages /app package.json webpack.confi
我是一名优秀的程序员,十分优秀!