如何在角度2中使用bootstrap 4？

Question

我正在构建一个用打字稿写的角度2应用程序.它会将bootstrap 4框架与一些自定义主题结合使用,这可能吗？

"ng2-bootstrap"npm包无法正常工作,因为它不允许我使用bootstrap css类,而是提供自定义组件.(http://github.com/valor-software/ng2-bootstrap)

在我的角度2项目中,我正在使用sass,是否可以从源代码构建bootstrap 4,因为它也使用sass进行样式化？

Answer 1

Angular2 CLI的Bootstrap4 alpha(也适用于Angular4 CLI)

如果您使用angular2 cli/angular 4 cli,请执行以下操作:

npm i bootstrap@next --save

这将为您的项目添加bootstrap 4.

接下来去你src/style.scss或src/style.css文件并导入引导有:

对于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,请确保将默认样式更改为scss .angular-cli.json:

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

Bootstrap JS组件

要使Bootstrap JS组件工作,您仍然需要导入bootstrap.js到.angular-cli.jsonunder 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 2

上面的选项可行,但我通过NPM使用这种方法:

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

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

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

3. 安装上面的依赖项后运行以下npm命令,它将安装bootstrap模块 npm install --save @ng-bootstrap/ng-bootstrap 你可以在这里阅读更多相关信息

4. 将以下导入添加到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": [
     "styles.css",
      "../node_modules/bootstrap/dist/css/bootstrap.min.css"
   ],
   

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

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

   或者如果您想使用ng警报,请将以下内容放在您的 app.component.html page

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

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

注意:您可以在此处阅读有关ng组件的更多信息

Answer 3

要使用任何需要JQuery的可视化库,请执行以下操作:

• 在索引中添加库css;
• 将jquery js文件添加到索引;
• 在索引中添加库js文件;
• 安装库定义文件(d.ts);
• 安装jquery定义文件(d.ts);

如果库没有定义文件,您可以:

• 自己创建定义;
• 使用与库对象相同的名称创建一个全局的任何变量,只是为了避免编译错误;
• 使用错误(这是最糟糕的选择);

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

Answer 4

我会建议:

• 只需在页面中包含Bootstrap CSS文件的链接即可index.html
• 使用ng-bootstrap - 一组专用的Angular 2指令,用于需要动态行为的部件.这样您就不需要导入/设置jQuery,也不需要关心Bootstrap的JavaScript.