angular 引入 Bootstrap 注册全局组件

版权声明：欢迎添加补充，转载请标明出处。 https://blog.csdn.net/qq_41648452/article/details/82817583

首先 你待搭建一个ng项目

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

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/里面运行了

引入Bootstrap

https://v3.bootcss.com/getting-started/#download  （Bootstrap官网下载教程）

npm install bootstrap@3

官网上给的是这个

但是我跑的是这个

npm install ngx-bootstrap bootstrap --save

安装成功

在项目根目录打开 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"

]

找到style.css

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

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

引入全局组件

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

ng g component xxx

ng g component coffee/header   

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

搭建成功~

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

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

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

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

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

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

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

刚才截图里面也圈出来了

在header.component.ts里面定义的

@Component({

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

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

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

})

然后打开你的浏览器

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