angular 引入 Bootstrap 注册全局组件

亦凉 2022-05-09 22:48 220阅读 0赞

## 首先 你待搭建一个ng项目 ##

按照官网的教程  （node和npm是必需品）

[https://angular.io/guide/quickstart][https_angular.io_guide_quickstart]  （ng官网教程）

1.npm install -g @angular/cli

2.ng new my-app

3.cd my-app

4.ng serve --open

这一套跑下来你的ng项目已经搭建完成并在[http://localhost:4200/][http_localhost_4200]里面运行了

### 引入Bootstrap ###

[https://v3.bootcss.com/getting-started/\#download][https_v3.bootcss.com_getting-started_download]  （Bootstrap官网下载教程）

npm install bootstrap@3

官网上给的是这个

但是我跑的是这个

**npm install ngx-bootstrap bootstrap --save**

![70][]

安装成功

**在项目根目录打开 angular-cli.json，没有angular-cli.json 的就打开angular.json（ng6.x以上版本angular-cli.json改为angular.json）**

**然后在styles和scripts加入对应文件**

"styles": \[

"../node\_modules/bootstrap/dist/css/bootstrap.min.css",

"src/styles.css"

\],

"scripts": \[

"../node\_modules/bootstrap/dist/js/bootstrap.bundle.js"

![70 1][]

**找到style.css**

在里面加入@import '~bootstrap/dist/css/bootstrap.min.css';

![70 2][]

这一套下来 **bootstrap** 就算安装完成了

**引入全局组件**

emmm我引入的是一个全局头部组件

ng g component xxx

ng g component coffee/header

coffee是自定义文件夹的名称，header 也是自定义文件夹的名称

![70 3][]

搭建成功~

在你的项目目录里面显示的是这个样子的

![70 4][]

header里面的文件是系统帮你生成并引入好的

如果想自己手动新建文件夹，需要在app.module.ts，header.module.ts里面手动配置文件

（我个人感觉有点麻烦，而且我是新手 容易配置错，所以就选了敲命令行了）

![70 5][]

![70 6][]

然后我们打开header.component.html写上你要的样式

![70 7][]

然后再主页app.component.html里面引入

![70 8][]

至于为什么是<app-header></app-header>这个标签呢

刚才截图里面也圈出来了

在header.component.ts里面定义的

@Component(\{

selector: 'app-header',//就这个

templateUrl: './header.component.html',

styleUrls: \['./header.component.css'\]

\})

然后打开你的浏览器

![70 9][]

你的组件已经在首页里面展示出来了

[https_angular.io_guide_quickstart]: https://angular.io/guide/quickstart
[http_localhost_4200]: http://localhost:4200/
[https_v3.bootcss.com_getting-started_download]: https://v3.bootcss.com/getting-started/#download
[70]: /images/20220510/9e1c2f31c1f8457da71a944dc6cf405e.png
[70 1]: /images/20220510/da2bacf6d98549fd8e971c473f14c4cd.png
[70 2]: /images/20220510/aa6975910b6b41659df5964e8e80982f.png
[70 3]: /images/20220510/1f6b4fa475994955ab21b6327d59e17e.png
[70 4]: /images/20220510/c39ec80615854c5bb3e371a7b81ea3ae.png
[70 5]: /images/20220510/b8ce5b5a33ba424b86d3f45348a0ac53.png
[70 6]: /images/20220510/beb78971a3e640799492f554919c2322.png
[70 7]: /images/20220510/447c1a26fb164d678d4ae3a23feedd3d.png
[70 8]: /images/20220510/0427730e06e647bfa6b88471afd88c86.png
[70 9]: /images/20220510/4cb27dc24a564017b71d50e12a81e5c3.png