使用bootstrap,在ts文件中使用javascript函数
请快速提问。虽然我看到了与我类似的问题,但我似乎不理解答案。事情是这样的。理想情况下,如果有一个页面是使用使用javascript函数的引导创建的。该函数要么包含在引导html文件中,要么将javascript文件作为外部文件,并在引导html标记中的某个位置调用。所以我的问题是如何在Angular中使用这个javascript文件(嵌入式/外部)函数?它是在使用bootstrap,在ts文件中使用javascript函数,javascript,angular,typescript,angular-ui-bootstrap,Javascript,Angular,Typescript,Angular Ui Bootstrap,请快速提问。虽然我看到了与我类似的问题,但我似乎不理解答案。事情是这样的。理想情况下,如果有一个页面是使用使用javascript函数的引导创建的。该函数要么包含在引导html文件中,要么将javascript文件作为外部文件,并在引导html标记中的某个位置调用。所以我的问题是如何在Angular中使用这个javascript文件(嵌入式/外部)函数?它是在索引文件中还是或.ts文件中还是在哪里?谢谢。这取决于您希望如何将引导添加到项目中。如果要将引导程序直接安装到项目中,您将编辑index.
索引文件中还是或.ts
文件中还是在哪里?谢谢。这取决于您希望如何将引导添加到项目中。如果要将引导程序直接安装到项目中,您将编辑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>
您还可以使用npm安装引导和JQuery,如下所示:
$npm安装bootstrap@3jquery—保存
。这将把引导和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"
],
或者您可以使用
和
标记将它们直接添加到index.html中,如上所示
或者您可以通过npm使用NG引导安装引导:npm安装--save@NG bootstrap/NG bootstrap
安装完成后,将其主模块导入NGModule
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}
任何其他需要使用引导的模块都需要导入引导主模块 很高兴我能帮忙,@user3679513。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
@NgModule({
declarations: [AppComponent, ...],
imports: [NgbModule.forRoot(), ...],
bootstrap: [AppComponent]
})
export class AppModule {
}