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

Posted 2023-02-22

技术标签:

【中文标题】ng-bootstrap 在角度 4 中不起作用【英文标题】：ng-bootstrap not working in angular 4 【发布时间】：2017-12-12 23:00:20 【问题描述】：

我是 Angular 4 的新手，我正在尝试配置引导程序。我安装了 ng-bootstrap：

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

我在页面上都喜欢，但在我的页面上看不到引导程序。这是我的代码：

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

<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>

我也尝试了index.html中的一些代码，但它不起作用，

对于这条线，我希望看到一些颜色：

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

当我检查 html 的标题时，我没有找到任何 bootstrap 参考。请问有什么帮助吗？谢谢

【问题讨论】：

【参考方案1】：

我在您的代码中没有看到任何 ng-bootstrap 组件！我认为您正在寻找引导 css，这也是 ng-bootstrap 的先决条件。

在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>

【讨论】：

【参考方案2】：

在您提到的页面中，ng-bootstrap 提到 bootstrap CSS 作为依赖项。所以这是单独加载的。

如果您使用 Angular CLI 创建应用程序，您可以follow this official guide 添加它，

更新：

如评论中所述，将 CSS 添加到 .angular-cli.json 中的 styles（或对此文件的任何其他更改）将需要您重新启动 ng serve 或 ng build --watch（如果您已经运行）。

更新 2（当前推荐的方法）：

对于 Angular 6 及更高版本，您可以使用此解决方案。

转到styles.css 并添加此行

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

还可以看看它是如何在幕后工作的：

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

【讨论】：

非常感谢，我需要重新启动 ng serve，它运行良好！谢谢谢谢，对我来说以下工作：@import "../node_modules/bootstrap/dist/css/bootstrap.css"; 对于 Angular 6 及更高版本，您可以使用此解决方案。转到 styles.css 并添加这一行 @import "~bootstrap/dist/css/bootstrap.css";它的工作很酷是的，这就是 2018 年 9 月更新 2 的建议。我说得更清楚了，这是推荐的方法。谢谢。

以上是关于ng-bootstrap 在角度 4 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章

折叠在导航栏面包屑按钮的 ng-bootstrap 和 Angular 4 应用程序中不起作用

在 Angular 4 项目中安装了 ng-bootstrap CSS，但它似乎不起作用

分页在角度 7 中不起作用。（我使用角度材料）

在角度 bootstrap4.3 类中不起作用

ng-bootstrap 打开焦点输入字段 css 不起作用

mat-card 在我的角度应用程序中不起作用