在angualr4中年引入ng-bootstrap

注意本教程只适用于angular4

虽然网上也有很多教程,我也按着好几个教程做了多遍,但都不对,可能是angular更新太快,导致很多教程已经不能用了,总之一路都是坑,我摸索了很久得出一个可行的方案,希望小伙伴们都能避免入坑

ng-bootstrap应该是针对angular4设计的,和官方快速搭建angular脚手架@angular/cli是对应的,所以请按如下步骤导入ng-bootstrap

1.用 npm install -g @angular/cli 安装angualr4

2.用

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

3.在你的工程里的app.module.ts中添加红色框里的内容在angualr4中年引入ng-bootstrap_第1张图片


4.在工程里的/src/assets下添加一个bootstrap/bootstrap.min.css,如图在angualr4中年引入ng-bootstrap_第2张图片

5.最后在工程里的style.css文件 下 ,添加这句代码:

@import "assets/bootstrap/bootstrap.min.css";

到这里就结束了,你可以用如下代码验证一下是否引入成功:

< p >
< ngb-alert [ dismissible]= "false" >
< strong >Warning! strong > Better check yourself, you're not looking too good.
ngb-alert >
p >
把这段代码放在你的组件的html模板中


你可能感兴趣的:(在angualr4中年引入ng-bootstrap)