如何在angular2中使用引导程序4？

我正在构build一个用脚本编写的angular度2应用程序。 它将使用引导4框架结合一些自定义主题，这是可能的吗？

“ng2-bootstrap”npm包不起作用，因为它不允许我使用引导css类，而是提供自定义组件。 （ http://github.com/valor-software/ng2-bootstrap ）

在我的angular度2项目中，我使用的是sass，是否可以从源代码构build引导程序4，因为它也使用sass的样式？

Answer 1

要使用任何需要JQuery的可视库，只需执行以下操作：

• 在索引中添加库CSS;
• 添加jquery js文件来索引;
• 在索引中添加库js文件;
• 安装库定义文件（d.ts）;
• 安装jQuery的定义文件（d.ts）;

如果库没有定义文件，你可以：

• 自己创build定义;
• 创build一个具有相同名称的库对象的全局任何variables，只是为了不会得到编译器错误;
• 错误使用（ 这是最糟糕的select ）;

现在你可以使用Typescript中的库了;

Answer 2

Angular2 CLI的Bootstrap4 alpha（也适用于Angular4 CLI）

如果您使用的是angular2 cli / angular 4 cli，请执行以下操作：

 npm i bootstrap@next --save 

这会将bootstrap 4添加到您的项目中。

接下来转到你的src/style.scss或src/style.css文件并在那里导入bootstrap：

对于style.css

 /* You can add global styles to this file, and also import other style files */ @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; 

对于style.scss

 /* You can add global styles to this file, and also import other style files */ @import "../node_modules/bootstrap/scss/bootstrap"; 

如果您正在使用scss，请确保将您的默认样式更改为.angular-cli.json ：

  "defaults": { "styleExt": "scss", "component": {} } 

引导JS组件

要使Bootstrap JS组件正常工作，您仍需要将bootstrap.js导入到scripts下的.angular-cli.json scripts （这应该会自动发生） ：

 ... "scripts": ["../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js"], ... 

更新2017/09/13： Boostrap 4 Beta现在使用popper.js而不是tether.js。 因此，根据您使用的版本，在脚本中导入tether.js（alpha）或popper.js（beta）。 感谢@MinorThreat的负责人

Answer 3

上面的选项是可行的，但是我通过NPM使用这个方法：

1. 导航到： Bootstrap 4并检索npm命令

2. 在项目中运行从步骤1中获得的NPM命令

   npm install bootstrap@4.0.0-alpha.5 --save

3. 在安装上面的依赖关系之后，运行下面的npm命令，它将安装引导模块npm install --save @ng-bootstrap/ng-bootstrap你可以在这里阅读更多

4. 将以下导入添加到import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; app.module import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 并将NgbModule添加到imports

5. 你的应用程序模块将如下所示：

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; @NgModule({ declarations: [ AppComponent, WeatherComponent ], imports: [ BrowserModule, FormsModule, HttpModule, NgbModule.forRoot(), // Add Bootstrap module here. ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } 

6. 打开angular-cli.json并在样式数组中插入一个新条目：

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

7. 打开src / app / app.component.html并添加

    <alert type="success">hello</alert> 

   或者如果您想要使用ng alert，请将以下内容放在app.component.html page

    <ngb-alert [dismissible]="true">I'm a dismissible alert :) </ngb-alert> 

8. 现在运行您的项目，您应该在浏览器中看到引导警报消息。

注意：您可以在这里阅读关于ng组件的更多信息

Answer 4

我会build议：

• 只需在index.html页面中包含Bootstrap CSS文件的链接即可
• 使用ng-bootstrap – 需要dynamic行为的部分的专用Angular 2指令集。 这样你就不需要导入/设置jQuery，也不需要关心Bootstrap的JavaScript。

Answer 5

首先转到您的项目目录，并按照下面给出的步骤。

1） npm install --save @ng-bootstrap/ng-bootstrap （在节点js命令提示符下运行这个命令）

2） npm install bootstrap@4.0.0-alpha.6 （下次运行这个）

3） import {NgbModule} from '@ng-bootstrap/ng-bootstrap' （在app module.ts中写入）

4）如果Module是你的根模块包含这个

 `@NgModule({ declarations: [AppComponent, ...], imports: [NgbModule.forRoot(), ...], bootstrap: [AppComponent] })` (or) 

如果没有root模块

 `@NgModule({ declarations: [OtherComponent, ...], imports: [NgbModule, ...] })` 

5）写在system.config.js中

 `map: { '@ng-bootstrap/ng-bootstrap': 'node_modules/@ng-bootstrap/ng- bootstrap/bundles/ng-bootstrap.js', }` 

6）添加在Index.html中

 `<script src="../node_modules/jquery/dist/jquery.min.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css" />` 

Answer 6

您可以使用npm来安装最新的引导版本。 这可以使用命令完成：

 npm install bootstrap@4.0.0-beta 

在此之后，您可能必须将bootstrap.css导入您的主要css文件。 如果你正在使用angular-cli，那将是styles.css。

 @import '~bootstrap/dist/css/bootstrap.min.css'; 

如果您想了解更多信息，请使用链接： http ： //technobytz.com/install-bootstrap-4-using-npm.html