Angular学习笔记（二十六）在angular中使用ng-bootsrtap之初体验

本文记录了在Angular项目中使用ng-bootstrap的过程，包括ng-bootstrap的概念、特点和使用步骤。ng-bootstrap是基于Angular和Bootstrap 4的TypeScript组件库，它的API完全在Angular环境中可用。文章介绍了如何全局安装ng-bootstrap，引入模块，使用Accordion组件，并解决样式问题，提供了通过CDN或安装bootstrap来引入样式的两种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在一个angular项目中使用ng-bootstrap，初步入门，所以记录一下。

这里查看官方文档

什么是ng-bootstrap

概念：基于Angular 的 Bootstrap组件
构架：TypeScript+bootstrap 4 CSS框架
特点：其API在Angular是可用的，不需要第三方js

如何使用ng-bootstrap

1.全局安装ng-bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

2.在angular项目中引入module

//app.module.ts
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    //在这里，加入
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

3.使用Accordion组件

使用ng g component accordionDemo新建组件，将Accordion组件代码放进accordionDemo中

展示图：
这里写图片描述

4.基本效果出来了，但是少了样式

因为ng-bootsrtap是基于angular和bootstrap的，所以样式的引用可以使用

方法一： bootstrap的CDN：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

方法二：安装bootstrap
npm install bootstrap
在 .angular-cli.json中引入样式：

"styles": [
        "styles.css",
        //引入bootstrap样式
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ]

这里写图片描述