ng-bootstrap 在角度 4 中不起作用

Question

I am new with angular 4, I am trying to configure bootstrap.我是 angular 4 的新手，我正在尝试配置引导程序。 I installed ng-bootstrap:我安装了 ng-bootstrap：

https://ng-bootstrap.github.io/#/getting-started https://ng-bootstrap.github.io/#/getting-started

I did all like on the page, but I don't see the bootstrap on my page.我在页面上做了所有喜欢的事情，但我没有在我的页面上看到引导程序。 Here is my code:这是我的代码：

src/app/app.module.ts src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
imports: [
   BrowserModule,
   FormsModule,  // add  this
   NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.html src/app/app.component.html

<div class="container">

<h1 class="text-primary">{{title}} </h1>

<h2 class="text-primary">My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes"
    [class.selected]="hero === selectedHero"
    (click)="onSelect(hero)">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
   </li>
</ul>

<div class="alert alert-success" role="alert">
 <strong>Well done!</strong> You successfully read this important alert 
   message.
</div>

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
  <label>name: </label>
  <input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>

I tried also some code in the index.html, but it does not work,我也在 index.html 中尝试了一些代码，但它不起作用，

for this line I am expecting to see some color:对于这条线，我希望看到一些颜色：

<h1 class="text-primary">{{title}} </h1>

I don't find any reference of bootstrap when I check the header of the html.当我检查 html 的标题时，我没有找到任何引导程序的参考。 Any help, please?有什么帮助吗？ Thanks谢谢

Answer 1

In the page you mentioned, ng-bootstrap mentions bootstrap CSS as a dependency.在您提到的页面中，ng-bootstrap 提到 bootstrap CSS 作为依赖项。 So that's loaded separately.所以这是单独加载的。

If you are using Angular CLI to create your application, you can follow this official guide to add it,如果你使用 Angular CLI 创建你的应用程序，你可以按照这个官方指南来添加它，

Update:更新：

As mentioned in the comment, adding the CSS to styles in .angular-cli.json (or any other changes to this file) will require you to restart your ng serve or ng build --watch if you have either already running.如评论中所述，将 CSS 添加到.angular-cli.json中的styles （或对此文件的任何其他更改）将要求您重新启动ng serve或ng build --watch如果您已经运行。

Update 2 (Current Recommended Approach):更新 2（当前推荐的方法）：

For Angular 6 and higher you can use this solution.对于 Angular 6 及更高版本，您可以使用此解决方案。

Go to styles.css and add this line转到styles.css并添加这一行

@import "~bootstrap/dist/css/bootstrap.css";

See also how this works under the hood:另请参阅其背后的工作原理：

https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975 https://blog.angularindepth.com/this-is-how-angular-cli-webpack-delivers-your-css-styles-to-the-client-d4adf15c4975

Answer 2

I don't see any ng-bootstrap component in your code, I think you are looking for bootstrap css.我在您的代码中没有看到任何 ng-bootstrap 组件，我认为您正在寻找引导程序 css。 which is also a prerequisite for ng-bootstrap.这也是 ng-bootstrap 的先决条件。

Add these lines in index.html between the <head></head> tag:在index.html中的<head></head>标记之间添加以下行：

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

ng-bootstrap 在角度 4 中不起作用

问题描述

2 个解决方案

解决方案1
46 已采纳 2017-07-09 03:02:51

Update:更新：

Update 2 (Current Recommended Approach):更新 2（当前推荐的方法）：

解决方案2
1 2017-07-09 01:53:52

ng-bootstrap 在角度 4 中不起作用

问题描述

2 个解决方案

解决方案1 46 已采纳 2017-07-09 03:02:51

Update:更新：

Update 2 (Current Recommended Approach):更新 2（当前推荐的方法）：

解决方案2 1 2017-07-09 01:53:52

解决方案1
46 已采纳 2017-07-09 03:02:51

解决方案2
1 2017-07-09 01:53:52